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>