Skip to content

To uncheck all checkboxes of an column in jqxGrid

I have small table built using jqxGrid. The 1st column contains checkboxes like below:

enter image description here

Expected result:

  1. On click of Uncheck All, need all these check-boxes to be un-checked like this:

enter image description here

  1. On click of remove need to get data of checkbox selected rows.


<div id='travelGrid'></div>
<button id="unselect">Unselect All</button>



$( 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;
                    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'}
    // Do something here
    // 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:


First you have to take your unselect click event in scope of of jQuery document due to you local scope of dataset.

   //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.

    // Do something here
     travelFees = => {
        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,