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%" },
], []);

Zeikman · Answer 1 · 2023-02-02T18:20:50.390

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>

Add a radio button jqxwidget

1 Answers1