jQuery UI Widgets › Forums › Grid › How to implement 'check all' function in checkboxes
Tagged: checkbox column, datagrid, grid
This topic contains 3 replies, has 3 voices, and was last updated by charles.amagbegnon 9 years ago.
-
Author
-
Hello,
Iam using checkboxes to select rows and pass the row data to variable. I want to implement a check all function so that all the rows in the grid will be selected and all the data shoul be passed.Can you please help me to find a solution? Check my code here…
$(document).ready(function(){
$(document).idleTimeout();
});$(document).ready(function () {
var theme = 'shinyblack'
var source =
{
datatype: "json",
datafields: [
{ name: 'receiptno'},
{ name: 'date'},
{ name: 'unit'},
{ name: 'party'},
{ name: 'address'},
{ name: 'amount',type: 'float'},],
url: ''
};$("#jqxgrid").jqxGrid(
{
source: source,
theme: theme,width: 950,
pageable: true,
autoheight: true,
autowidth: true,
sortable: true,
editable:true,
selectionmode: 'none',columns: [
{ disabled:true,text: '', datafield: 'available', columntype: 'checkbox', width: 30 },
{ text: 'Reciept No.', datafield: 'receiptno', width: 100},
{ text: 'Entry Date', datafield: 'date', width: 120},
{ text: 'Unit', datafield: 'unit', width:100,cellsalign: 'left' },
{ text: 'Party', datafield: 'party', width:200,cellsalign: 'left' },
{ text: 'Address', datafield: 'address', width:280,cellsalign: 'left' },
{ text: 'Amount', datafield: 'amount',minwidth: 100, resizable: false, width: 'auto', cellsalign: 'right',cellsformat: 'd2'},]
});$("#jqxgrid").bind('cellendedit', function (event) {
if (event.args.value) {
$("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
}
else {
$("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
}
});$('#jqxgrid').bind('rowselect', function (event){
var rows = $("#jqxgrid").jqxGrid('selectedrowindexes');
var selectedRecords = new Array();
var value = new Array();
for (var m = 0; m < rows.length; m++)
{
var row = $('#jqxgrid').jqxGrid('getcellvalue', rows[m], "receiptno");
selectedRecords[selectedRecords.length] = row;
}document.getElementById("invoice").value=selectedRecords;
document.getElementById("rowcount").value=selectedRecords.length;
});$('#jqxgrid').bind('rowunselect', function (event){
var rows = $("#jqxgrid").jqxGrid('selectedrowindexes');
var selectedRecords = new Array();
var value = new Array();
for (var m = 0; m < rows.length; m++)
{
var row = $('#jqxgrid').jqxGrid('getcellvalue', rows[m], "receiptno");
selectedRecords[selectedRecords.length] = row;
}document.getElementById("invoice").value=selectedRecords;
document.getElementById("rowcount").value=selectedRecords.length;
});});
I suggest you to take a look at the implementation of this sample: customrowsselection.htm. It shows how to select/check a row by using a checkbox. You can also manually check a checkbox in a checkbox column by using the Grid’s setcellvalue method and pass the ‘row index’, ‘column datafield’, ‘new cell value’ and false as final parameter. You need to pass false as final parameter because this prevents the Grid’s refresh when the cell’s value is changed.
Here’s the sample with Check All capability done on a button click:
<!DOCTYPE html><html lang="en"><head> <title id="Description">Custom Rows Selection</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid. Disable the built-in selection. $("#jqxgrid").jqxGrid( { source: dataAdapter, editable: true, theme: theme, enablehover: false, selectionmode: 'none', columns: [ { text: '', datafield: 'available', columntype: 'checkbox', width: 40 }, { text: 'First Name', editable: false, datafield: 'firstname', width: 90 }, { text: 'Last Name', editable: false, datafield: 'lastname', width: 90 }, { text: 'Product', editable: false, datafield: 'productname', width: 200 }, { text: 'Quantity', editable: false, datafield: 'quantity' } ] }); // select or unselect rows when the checkbox is checked or unchecked. $("#jqxgrid").bind('cellendedit', function (event) { if (event.args.value) { $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex); } else { $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex); } }); // check all $("#button").click(function() { var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; $("#jqxgrid").jqxGrid('beginupdate'); for (var i = 0; i < rowscount; i++) { $("#jqxgrid").jqxGrid('setcellvalue', i, 'available', true, false); } $("#jqxgrid").jqxGrid('endupdate'); }); }); function generatedata(rowscount) { // prepare the data var data = new Array(); var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; for (var i = 0; i < rowscount; i++) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var quantity = 1 + Math.round(Math.random() * 10); row["available"] = false; row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["quantity"] = quantity; data[i] = row; } return data; } </script></head><body class='default'> <div id='jqxWidget'> <div id="jqxgrid"></div> <input id="button" type="button" value="Check All" /> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks..it worked 🙂
Dear Peter,
I am trying to implement a grid with two select all checkboxes. Here are my requirement:
– I have two boolean Read, Write checkbox column populated with my datasource. Those two editable checkbox columns should have a select all checkbox as header. In addiction, only one checkbox column value should be true. It means they are exclusive. Ex: When Read is true, Write is automatically false. Then Write checkbox is checked, automatically, Read is unchecked.– I don’t really need pageable attribute to true. And of course checkbox columns are unsortable.
{ text: ‘Name’, datafield: ‘Name’, width: 200, columntype: ‘center’, editable: false, align: ‘center’},
{ text: ‘Read’, datafield: ‘Read’, sortable: false, columntype: ‘checkbox’, cellsalign: ‘center’, width: 60, align: ‘center’},
{ text: ‘Write’, datafield: ‘Write’, sortable: false, cellsalign: ‘center’, width: 60, columntype: ‘checkbox’, align: ‘center’ }Based on the above examples, I try to implement a solution but I can’t achieve my requirement.
Could you please help me on this. I can upload my whole code if needed.
-
AuthorPosts
You must be logged in to reply to this topic.