Flexgrid - Sync row clicks with checkbox clicks

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

  • Posted 18 September 2022, 9:07 pm 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!
  • Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels