Flexgrid - Sync row clicks with checkbox clicks

Flexgrid - Sync row clicks with checkbox clicks

Posted by: stackflowone on 18 September 2022, 9:07 pm EST

• 

  stackflowone

  • Post Options:
  • Link
    Copy

  Posted 18 September 2022, 9:07 pm EST - Updated 3 October 2022, 2:41 am EST

  Hi Team,
  
  I want to sync the grid row selection with checkbox selection. Whenever we click a row we need to select that row’s checkbox. Can I know how can we extend the data grid to have below row selection features.

  1. Selecting a row should select the corresponding checkbox.
  2. Clicking on a selected row should unselect the row and uncheck the checkbox.
  3. If we drag the cursor currently it will only multi-select the rows, can we multi-check the checkboxes as well?

  I have tried to use the SelectionChanged event callback as below, It seems working fine with the single row clicks. However, when I drag through the records it not working properly.

  
  let theGrid = GridOS.GridObject[0].grid;
  function onSelectionChanged (s, e) {
      theGrid.deferUpdate(function ()  {
          console.log(e.panel._rows[e.row]);
          if(theGrid._rows[e.row] && theGrid._rows[e.row].dataItem){
              theGrid._rows[e.row].dataItem.os_isSelected = !theGrid._rows[e.row].dataItem.os_isSelected;
          }
      });
  }
  
  

  Kindly let us know if this is possible.
  
  Thank you very much!

  

  989×496 74 KB

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 19 September 2022, 9:52 pm EST

  Hi,

  To sync the checkbox selection with the row selection, you’ll just need to refresh the grid each time the selection is changed, using the ‘selectionChanged’ event handler. This will complete all your requirements, except the one, which is deselecting a selected row when clicked again. Your desired action will be performed on ctrl + clicking the row.
  
  If you want it to be performed on clicking only, instead of ctrl + clicking, you’ll need to add a ‘mousedown’ event listener on the grid cells and override the default action.

  Please find attached a sample for the same https://stackblitz.com/edit/js-a3vrxa?file=index.js

  Please let us know if you have any further queries.

  Regards