jQWidgets Forums
jQuery UI Widgets › Forums › Grid › How to implement select all checkbox column in a grid with filter ?
This topic contains 0 replies, has 1 voice, and was last updated by Apeksha Singh 12 years ago.
-
Author
-
Hi,
I am using jquery-1.8.2.min.js and jQWidgets v2.6.1 Release for my project.
Now I am facing an issue that is I have a select all checkbox in my grid that select all the row and also checked the comboboxes of each row.
While using filter it is affecting my select all code as I am selecting rows by using row index.
And also I tried to use getrowboundindex but it is not working.I am adding my code below please let me know :-
var draft_initGrid = function () { gridid = "#draft_invoicetable";//update gridid... //console.log("gridid in draft_initGrid",gridid); //var url = "sampledata/invoice_maindata.php"; var source = { localdata: draft_invoice_data, datatype: "json", datafields: [ { name: 'item', type: 'bool' }, { name: 'id', type: 'number' }, { name: 'number', type: 'string' }, { name: 'reference', type: 'string' }, { name: 'contact_name', type: 'string' }, { name: 'contact_id', type: 'number' }, { name: 'date', type: 'string' }, { name: 'due_date', type: 'string' }, //{ name: 'paid', type: 'float' }, { name: 'due', type: 'float' }, { name: 'workflow_status_id', type: 'number' }, { name: 'workflow_status_status', type: 'string' }, { name: 'transaction_type_id', type: 'number' }, ], // id: 'id', // url: url, // root: 'data' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var columnCheckBox = null; var updatingCheckState = false; // initialize jqxGrid $("#draft_invoicetable").jqxGrid( { width: '97.7%', autoheight:true, source: dataAdapter, //sortable: true, enabletooltips: true, altrows: true, pageable: true, pagesizeoptions: ['10', '20','30','40','50'], editable:true, selectionmode: 'none', theme: 'metro', columns: [ { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () { return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';/*CHANGES DONE ON 27 Feb*/ }, rendered: function (element) { $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 }); columnCheckBox = $(element); $(element).on('change', function (event) { console.log("event :",event); var paginginformation = $("#draft_invoicetable").jqxGrid('getpaginginformation'); var pagenum = paginginformation.pagenum; var pagesize = paginginformation.pagesize; var pagescount = paginginformation.pagescount; var k = 1; var pageArray = new Array(); for (var i = pagenum * pagesize; i < (pagenum + 1) * pagesize; i++) { pageArray.push(i); }; var checked = event.args.checked; if (checked == null || updatingCheckState) return; var rowscount = $("#draft_invoicetable").jqxGrid('getdatainformation').rowscount; $("#draft_invoicetable").jqxGrid('beginupdate'); if (checked) { $("#draft_invoicetable").jqxGrid({ selectedrowindexes: pageArray }); for (m = pagenum * pagesize; m < (pagenum + 1) * pagesize; m++) { // Get the Check box value of all rows on the page var value = $('#draft_invoicetable').jqxGrid('getcellvalue', m, "item"); if (value != null){ $("#draft_invoicetable").jqxGrid('setcellvalue', m, 'item', event.args.checked); k = k * 1; } else { k = k * 0; break; }; }; if (0 ==(m % pagesize)) x = pagesize; else x = m % pagesize; }// END OF if (checked) else if (checked == false) { $("#draft_invoicetable").jqxGrid('clearselection'); for (var j = (pagenum) * pagesize; j < (pagenum + 1) * pagesize; j++) { $("#draft_invoicetable").jqxGrid('setcellvalue', j, 'item', event.args.checked); } x=0; } $("div#draftitem_label label").text(x); $("#draft_invoicetable").jqxGrid('endupdate'); }); } }, { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true }, { text: 'Number',datafield: 'number', editable:false,width: '12%' }, { text: 'Ref',datafield: 'reference',editable:false,width: '12%' }, { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true }, { text: 'To',datafield: 'contact_name',editable:false,width: '12%' }, { text: 'Date',datafield: 'date',editable:false, width: '15%' }, { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' }, // { text: 'Paid',datafield: 'paid', width: '8%' }, { text: 'Due',datafield: 'due',editable:false,width: '8%' }, { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true }, { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' }, { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true } ] }); //START :Code to refresh the grid row selection on changing page or pagesize.Added by UI $("#draft_invoicetable").on("pagechanged", function (event) { //var args = event.args; //var pagenum = args.pagenum; //var pagesize = args.pagesize; $('#draft_invoicetable').jqxGrid('updatebounddata'); $("#draft_invoicetable").jqxGrid('clearselection'); $("div#draftitem_label label").text(0); }); $("#draft_invoicetable").on("pagesizechanged", function (event) { //var args = event.args; //var pagenum = args.pagenum; //var oldpagesize = args.oldpagesize; //var pagesize = args.pagesize; $("#draft_invoicetable").jqxGrid('updatebounddata'); $("#draft_invoicetable").jqxGrid('clearselection'); $("div#draftitem_label label").text(0); }); //END :Code to refresh the grid row selection on changing page or pagesize.Added by UI // select or unselect rows when the checkbox is checked or unchecked. $("#draft_invoicetable").bind('cellendedit', function (event) { if (event.args.value) { $("#draft_invoicetable").jqxGrid('selectrow', event.args.rowindex); ++x; $("div#draftitem_label label").text(x); } else { $("#draft_invoicetable").jqxGrid('unselectrow', event.args.rowindex); --x; $("div#draftitem_label label").text(x); //main checkbox set false if(x==0) { columnCheckBox.jqxCheckBox({ checked: false }); } } });
Please tell me how I can use filter so that it won’t disturb my this code.
Thanks & Regards,
Apeksha -
AuthorPosts
You must be logged in to reply to this topic.