Add a radio button jqxwidget

Question

I am using jqxgrid in my application.Here,I want to have 'radiobutton' selection mode for selecting a particular row as we have 'checkbox' selection mode.We have 'singleselect' selection mode available for selecting one row at a time but I also want to display the radiobutton for every row as we get it for checkbox.So,can anyone please suggest a solution for this.

that is my code:

  const source = useMemo(() => new jqx.dataAdapter({
id: 'id',
localdata: dotsStation,
datatype: 'array',
datafields: [
  { name: 'id', type: 'string', map: "id" },
  { name: 'name', type: 'string', map: 'name' },
  { name: 'descrition', type: 'string', map: 'descrition' },
  { name: 'lat', type: 'number', map: "latitude" },
  { name: 'long', type: 'number', map: "long" },
  { name: 'altitude', type: 'number', map: "altitude" },
  { name: 'idDatum', type: 'number', map: "idDatum" },
  { name: 'status', type: 'string', map: "status" },
  { name: 'sync', type: 'bool', map: "sync" },
  ], }), [dotsStation]);  
const columns = useMemo(() => [
{
  text: 'Sync/Unsync', width: "10%", menu: false, dataField: 'sync',
  columntype: "checkbox", type: "boolean", enabletooltips: false,
},
{ text: 'Long', datafield: 'long', width: "15%", editable: false },
{ text: 'Lat', datafield: 'lat', width: "15%", editable: false },
{ text: 'Altitude (m)', datafield: 'altitude', width: "15%", editable: false },
{ text: 'Name', datafield: 'name', editable: false, width: "15%" },
{ text: 'Descrition', datafield: 'descrition', editable: false, width: "15%" },
{ text: 'Status', datafield: 'status', editable: false, width: "15%" },
], []);

Answer 1

So, you want to have a "radio button"-like selection mode.

The first solution is that you can use the 'checkbox' selection mode to achieve this.

The pros is,
you can even click on any cell to select a row, not just the checkbox.

The cons is,
the 'select all' checkbox on the header row will not work anymore, but I think it should be that way in your circumstance.

$('#jqxgrid').on('rowselect', function (event) 
{
  var args = event.args;
  var rowBoundIndex = args.rowindex;
  var selectedRowIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
  var filtered = selectedRowIndexes.filter(value => value != rowBoundIndex);
  filtered.forEach(index => $("#jqxgrid").jqxGrid('unselectrow', index));
});
  
$("#jqxgrid").on("cellclick", function (event) 
{
  var args = event.args;
  var rowBoundIndex = args.rowindex;
    
  $("#jqxgrid").jqxGrid('selectrow', rowBoundIndex);
});

 $(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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 } ]; // 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" } ], localdata: data }; var dataAdapter = new $.jqx.dataAdapter(source); var source = { localdata: data, datatype: "array", }; $("#jqxgrid").jqxGrid({ source: dataAdapter, theme: "energyblue", width: "98%", height: "630px", selectionMode: "checkbox", autoheight: true, autorowheight: true, columns: [{ text: "Legal Name", datafield: "legalName", width: "20%" }, { text: "Agency Name", datafield: "agencyName", filtertype: "checkedlist", width: "20%" }, { text: "Agency Address", datafield: "agencyAddress", width: "20%" }, { text: "Phone", datafield: "phone", width: "20%" }, { text: "Hire Date", datafield: "hireDate", cellsformat: "d", filtertype: "range", width: "10%" } ] }); $('#jqxgrid').on('rowselect', function (event) { var args = event.args; var rowBoundIndex = args.rowindex; var selectedRowIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes'); var filtered = selectedRowIndexes.filter(value => value;= rowBoundIndex). filtered.forEach(index => $("#jqxgrid"),jqxGrid('unselectrow'; index)); }). $("#jqxgrid"),on("cellclick". function (event) { var args = event;args. var rowBoundIndex = args;rowindex. // $("#jqxgrid");jqxGrid('clearselection'). $("#jqxgrid"),jqxGrid('selectrow'; rowBoundIndex); }); });

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

---

The second solution is use the 'cellvaluechanged' event to detect the field value changes, which I think this should be more preferrable based on your code.

 $("#jqxgrid").on("cellvaluechanged", function (event) { var args = event.args; var rowBoundIndex = args.rowindex; var value = args.newvalue; var allrows = $("#jqxgrid").jqxGrid('getrows'); if (value) { allrows.filter(data => { if (data.boundindex.= rowBoundIndex && data.sync) { $("#jqxgrid"),jqxGrid('setcellvalue'. data,boundindex, 'sync'; false); } }); } });

 $(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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 }, { 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, lock: 1 } ]; // 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: "sync", 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: 'Sync/Unsync', width: "100", menu: false, datafield: 'sync', columntype: "checkbox" }, { 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: "Phone", datafield: "phone", width: "20%", editable: false }, { text: "Hire Date", datafield: "hireDate", cellsformat: "d", filtertype: "range", width: "10%", editable: false } ] }); $("#jqxgrid").on("cellvaluechanged", function (event) { var args = event.args; var rowBoundIndex = args.rowindex; var value = args.newvalue; var allrows = $("#jqxgrid").jqxGrid('getrows'); if (value) { $("#jqxgrid").jqxGrid('selectrow', rowBoundIndex); allrows.filter(data => { if (data.boundindex.= rowBoundIndex && data.sync) { $("#jqxgrid"),jqxGrid('setcellvalue'. data,boundindex, 'sync'; false); } }); } }); });

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