jQWidgets Forums
jQuery UI Widgets › Forums › Grid › How to implement select all checkbox column in a grid with filter ?
Tagged: grid checkbox selection
This topic contains 6 replies, has 2 voices, and was last updated by Apeksha Singh 12 years ago.
-
Author
-
July 15, 2013 at 10:50 am How to implement select all checkbox column in a grid with filter ? #25163
Hi,
I am using jquery-1.10.1.min.js and jQWidgets v2.9.2 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 :-
Please tell me how I can use filter so that it won’t disturb my this code.
Thanks & Regards,
ApekshaJuly 15, 2013 at 10:58 am How to implement select all checkbox column in a grid with filter ? #25168Hi,
1. “getrowboundindex” returns the bound index of a row i.e its index in the data source. The parameter that you should pass to that method is the row’s visible index. If the passed row index is invalid, the method will return -1.
2. At present, we do not provide built-in selection with checkboxes. This will be implemented for the next version.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comJuly 15, 2013 at 11:04 am How to implement select all checkbox column in a grid with filter ? #25171Hi Peter Stoev,
Please have a look to my code can you tell me how I can use filter with this :-
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 }); } } });
Thanks & Regards,
ApekshaJuly 15, 2013 at 11:18 am How to implement select all checkbox column in a grid with filter ? #25173Hi,
You may bind to the “filter” event and make the appropriate updates in your code when the filter is changed. The “getrows” method will return the data loaded in the Grid view. You can use it to learn which rows are visible, which are not and to update the checkbox values in your code.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter Stoev,
Can we get the rowindex if we have the getrowboundindex for a particular grid row.
If yes then please tell me how?Thanks & Regards,
ApekshaHi,
What is “rowindex”? The “getrowboundindex ” returns the row’s index in the data source. “getrowdisplayindex” is another method which ruturns the row’s display index from a bound index passed as parameter.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Can’t fount “getrowdisplayindex” method on your website documentation in Grid’s API.
Regrads,
Apeksha -
AuthorPosts
You must be logged in to reply to this topic.