jqWidget - disable checkbox based on data

Question

I'm using for my project the plugin jqWidget and for my table, I set "checkbox" as a "selection mode".

Now what I need is when the table will load, to disable/hide the checkbox for some rows based on the data values in each one, for exemple, if a value called "disableCheckbox" is "true", the checkbox will not be showed, and if it's "false", the checkbox will be enabled.

Any help is greatly appreciated.

Answer 1

I don't think you could control the visibility of the default rendered checkbox in "checkbox" selection mode.

I have another solution which is use my own checkbox column { columntype: 'checkbox' } and control the "checkbox" visibility using cellclassname property with the help of CSS.

Hope it helps !

PS: I do have an open source library that provides some useful, daily-used methods and functionalities for the sake of re-coding those features every time, I use it for my company project too, feel free to reference it, EnhanceDataGrid.js

$(document).ready(function() {
  var data = [{
      id: "1",
      legalName: "Agrawal, Parag",
      agencyName: "Social Services",
      agencyAddress: "Market Square, 1355 Market St<br>#900<br>San Francisco, CA 94103",
      phone: "(415) 222-9670",
      hireDate: "04-3-2022",
      has401k: true,
      disableCheckbox: true
    },
    {
      id: "2",
      legalName: "Zuckerberg, Mark",
      agencyName: "Defense Advocates Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 456-1234",
      hireDate: "01-30-2019",
      has401k: true,
      disableCheckbox: false
    },
    {
      id: "2",
      legalName: "Walker, Johnny",
      agencyName: "Prosecutor's Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 329-0124",
      hireDate: "10-03-2016",
      has401k: false,
      disableCheckbox: true
    },
    {
      id: "2",
      legalName: "Daniels, Jack",
      agencyName: "Prosecutor's Office",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 856-5309",
      hireDate: "07-28-2011",
      has401k: false,
      disableCheckbox: false
    },
    {
      id: "2",
      legalName: "Fonda, Jane",
      agencyName: "Social Services",
      agencyAddress: "1 Hacker Way<br>Menlo Park, CA 94025",
      phone: "(123) 456-1234",
      hireDate: "06-14-2021",
      has401k: true,
      disableCheckbox: false
    },
    {
      id: "2",
      legalName: "Bauer, Jack",
      agencyName: "National Defense",
      agencyAddress: "24 Bauer Way<br>Menlo Park, CA 94025",
      phone: "(123) 242-4242",
      hireDate: "11-10-2008",
      has401k: false,
      disableCheckbox: false
    }
  ];

  // prepare the data
  var source = {
    datatype: "json",
    datafields: [{
        name: "legalName"
      },
      {
        name: "agencyName"
      },
      {
        name: "agencyAddress"
      },
      {
        name: "phone"
      },
      {
        name: "hireDate",
        type: "date"
      },
      {
        name: "has401k",
        type: "bool"
      },
      {
        name: "lock",
        type: "number"
      },
      {
        name: "cbx",
        type: "boolean"
      },
      {
        name: "disableCheckbox",
        type: "boolean"
      }
    ],
    localdata: data
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  var source = {
    localdata: data,
    datatype: "array",
  };

  $("#jqxgrid").jqxGrid({
    source: dataAdapter,
    theme: "energyblue",
    width: "98%",
    height: "630px",
    autoheight: true,
    autorowheight: true,
    editable: true,
    columns: [{
        text: 'Checkbox', 
        width: "100", 
        menu: false, 
        datafield: 'cbx',
        columntype: "checkbox",
        cellclassname: function (row, column, value, data) {
          if (data.disableCheckbox) {
            return "hideCheckbox";
          }
        }
      },
      {
        text: "Legal Name",
        datafield: "legalName",
        width: "20%",
        editable: false
      },
      {
        text: "Agency Name",
        datafield: "agencyName",
        filtertype: "checkedlist",
        width: "20%",
        editable: false
      },
      {
        text: "Agency Address",
        datafield: "agencyAddress",
        width: "20%",
        editable: false
      },
      {
        text: "Hire Date",
        datafield: "hireDate",
        cellsformat: "d",
        filtertype: "range",
        width: "10%",
        editable: false
      }
    ]
  });
});

.hideCheckbox * {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqx-all.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.energyblue.min.css" rel="stylesheet"/>

<div id="jqxgrid"></div>