jqwidgets jxGrid (selectionmode checkbox) select row (check) for any click on the row

Question

I've a jqxGrid with checkboxes (documentation and example).

I'd like to select the row (and as result the checkbox become checked) when the user click on any place/column of the row (and not only on checkbox) but it doesn't seems to be possible.

Someone found a solution for this?

PS - The events "cellselect" or "rowselect" aren't triggered when the selectionmode = "checkbox" (but it works for "multiplerows")

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/rowselection.htm

Answer 1

I think the 'cellclick' event might help you out.

$("#jqxgrid").on("cellclick", function (event) 
{
  var args = event.args;
  var rowBoundIndex = args.rowindex;
  var selectedRowIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
  var toggleSelection = selectedRowIndexes.indexOf(rowBoundIndex) > -1
    ? 'unselectrow'
    : 'selectrow';
    
  $("#jqxgrid").jqxGrid(toggleSelection, rowBoundIndex);
});

You could try out the following code snippet; it should do what you expect.

Hope it helps !

$(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("cellclick", function (event) 
  {
    var args = event.args;
    var rowBoundIndex = args.rowindex;
    var selectedRowIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
    var toggleSelection = selectedRowIndexes.indexOf(rowBoundIndex) > -1
      ? 'unselectrow'
      : 'selectrow';
    
    $("#jqxgrid").jqxGrid(toggleSelection, 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>

Answer 2

Have you tried the 'rowclick' event?