Show checkbox selected rows in grid view in another grid.

[Anoop Sukumaran]

Hi Team, I am using data grid to show some values. I need to select some rows and those rows should populate on another grid in same page. During row checkbox toggle event, I should be able to select the record and then remove from current grid , load on another grid. If I uncheck any records from 2nd table, then remove it from that table and bring back to original.

[Kishore Muthukrishnan]

Hi Anoop,

Greetings from Syncfusion Support.

We understand that you want to transfer the data between two grids based on checkbox selection. You can achieve this by handling rowSelected and rowDeselected events for getting the selected and deselected records and transfer the records between two grids. Additionally, use the dataBound event to select the records that have been transferred from one grid to the other. Please refer the below  code snippet and sample for more information.

[App.js]

// Handle row selection in Grid 1

  const handleSelectGrid1 = () => {

    const selectedRecords = grid1Ref.current.getSelectedRecords();

    // Proceed only if there are selected records

    if (selectedRecords.length > 0) {

      // Remove selected records from Grid 1 and add to Grid 2

      const newGrid1Data = grid1Data.filter(

        (row) => !selectedRecords.includes(row)

      );

      const newGrid2Data = [...grid2Data, ...selectedRecords];

      // Update state and reset selection

      setGrid1Data(newGrid1Data);

      setGrid2Data(newGrid2Data);

      setIsDataTransfer(true);

    }

  };

 

  // Handle row deselection in Grid 2

  const handleDeselectGrid2 = (args) => {

    // args.data is an array of the deselected records

    const deselectedRecords = Array.isArray(args.data) ? args.data : [args.data];

    if (deselectedRecords.length > 0 && args.isInteracted) {

      // Add deselected records back to Grid 1 and remove from Grid 2

      const newGrid1Data = [...grid1Data, ...deselectedRecords];

      const newGrid2Data = grid2Data.filter(

        (row) => !deselectedRecords.includes(row)

      );

      // Update state

      setGrid1Data(newGrid1Data);

      setGrid2Data(newGrid2Data);

      setIsDataTransfer(true);

    }

  };

 

//Handle selection of the row which is added in Grid 2

  const handleDataBound = () => {

    //handle the process only when data transfer occurs

    if (isDataTransfer) {

      const rowIndexesToSelect = grid2Data.map((_, index) => index);

      grid2Ref.current.selectRows(rowIndexesToSelect);

      setIsDataTransfer(false); // Reset the flag after processing

    }

  };

Sample: https://stackblitz.com/edit/react-6fqq1m-efccbj?file=App.js

Refer the below API links for more information about rowSelected, rowDeselected, dataBound events.

• dataBound: https://ej2.syncfusion.com/react/documentation/api/grid/#databound
• rowSelected: https://ej2.syncfusion.com/react/documentation/api/grid/#rowselected
• rowDeselected: https://ej2.syncfusion.com/react/documentation/api/grid/#rowdeselected
   

Regards,

Kishore Muthukrishnan