I have small table built using jqxGrid. The 1st column contains checkboxes like below:
Expected result:
HTML:
<div id='travelGrid'></div>
<br>
<button id="unselect">Unselect All</button>
Remove
JS:
$( document ).ready(function() {
var travelGridSource = {
localdata: [],
datafields: [
{ name: 'isSelected', type: 'bool' },
{ name: 'Zipcode', type: 'number' },
{ name: 'TravelFee', type: 'number' }
],
datatype: "array"
}
var travelFees = [
{ "isSelected": "true", "Zipcode": "001", "TravelFee": "25"},
{ "isSelected": "true", "Zipcode": "002", "TravelFee": "75"},
{ "isSelected": "false", "Zipcode": "003", "TravelFee": "75"},
{ "isSelected": "true", "Zipcode": "004", "TravelFee": "75" },
{ "isSelected": "false", "Zipcode": "004", "TravelFee": "75" }
];
travelGridSource.localdata = travelFees;
$("#travelGrid").jqxGrid({
width: '100%',
height: '20%',
rowsheight: 29,
columnsheight: 29,
source: new $.jqx.dataAdapter(travelGridSource),
sortable: true,
columnsresize: true,
columnsmenu: false,
showsortcolumnbackground: false,
enablehover: false,
selectionmode: 'none',
scrollmode: 'logical',
theme: 'light',
rowdetails: true,
editable: true,
showrowdetailscolumn: false,
columns: [
{ text: '', datafield: 'isSelected', width: '7%', align: 'center', columntype: 'checkbox', cellsalign: 'center', 'editable': true },
{ text: 'Zip', datafield: 'Zipcode', width: '15%', align: 'center', cellsalign: 'center', 'editable': false },
{ text: 'Travel Fee', datafield: 'TravelFee', width: '20%', align: 'center', cellsalign: 'center', cellsformat: 'c2'}
]
});
});
$('#unselect').click(function(){
// Do something here
});
$('#remove').click(function(){
// Do something here
});
Have surfed lot and the documentation too but no use. Couldn't able to append fiddle link, So pasted the fiddle URL as code:
https://jsfiddle.net/75zrfko0/25/
First you have to take your unselect click event in scope of of jQuery document due to you local scope of dataset.
$(document).ready(function(){
//unselect onclick event listener
})
Then on click of that button you have to update that local dataset from which you are adding flags for checkboxes & lastly have to update source in jqxGrid that you have taken.
$('#unselect').click(function(){
// Do something here
travelFees = travelFees.map((obj) => {
obj.isSelected = "false";
return {...obj};
})
travelGridSource.localdata = travelFees;
$("#travelGrid").jqxGrid({source: new $.jqx.dataAdapter(travelGridSource)});
});
I haven't fully gone through API for JQXWiget but there can be a method to update local dataset please follow the below link,