Prevent Row Activation When Clicking Non-Checkbox Cells in Kendo Grid

0 Answers 29 Views
Checkbox Grid GridLayout
Trustin
Top achievements
Rank 1
Iron
Trustin asked on 21 Feb 2025, 04:52 PM | edited on 22 Feb 2025, 05:00 AM

Hello,

I am using the latest version of Kendo React Grid with multi-row selection and checkboxes. However, I encountered an issue where clicking on a cell (e.g., in the Product Name column) resets the previously selected checkboxes.

Steps to Reproduce:

  1. Click on multiple checkboxes to select rows.
  2. Click on a cell in the Product Name column.
  3. The previous checkbox selections are reset.

Expected Behavior:

  • I only want the checkboxes to control row selection.
  • Clicking on other cells (e.g., Product Name) should not affect the selected checkboxes.

Current Behavior:

  • Clicking a non-checkbox cell resets the checkbox selection.

Demo & Documentation:

<Grid data={products} style={{
      height: '400px'
    }} dataItemKey={DATA_ITEM_KEY} selectable={{
      enabled: true,
      drag: false,
      cell: false,
      mode: 'multiple'
    }} select={select} onSelectionChange={onSelectionChange} onHeaderSelectionChange={onHeaderSelectionChange}>
                <Column columnType="checkbox" />
                <Column field="ProductName" title="Product Name" width="300px" />
                <Column field="UnitsInStock" title="Units In Stock" />
                <Column field="UnitsOnOrder" title="Units On Order" />
                <Column field="ReorderLevel" title="Reorder Level" />
            </Grid>

Question:

How can I prevent clicking on other cells from affecting the checkbox selection? I want rows to be selected only via checkboxes, not by clicking other cells.

Thanks in advance!

Best regards,
Trustin


Trustin
Top achievements
Rank 1
Iron
commented on 22 Feb 2025, 05:00 AM | edited


    /**
     * Specifies the name of the field which will provide a:
     * - Boolean representation of the selected state of the item ([see example]({% slug selection_grid %})) for row selection
     * - String array of the selected columns of the item  for cell selection
     *
     * @deprecated This prop is deprecated in favor of the ([select]({% slug api_grid_gridprops %}#toc-select)) prop.
     * We’re removing this prop in version 11.0.0.
     */
    selectedField?: string;
Vessy
Telerik team
commented on 25 Feb 2025, 11:55 AM

Hi, Trustin, 

Thanks a lot for contacting us. The described behavior is related to the fact that currently the row and checkbox selection of the Grid are designed to work independently. We discussed the reported scenario further and agreed on that it will be helpful to introduce an option to disable the row click selection when the user needs to do so. For convenience, I  have created an enhancement issue for such improvement in our GitHub repo, you can track its progress here:

I have also updated your Telerik points as a small token of gratitude for the shared feedback.

No answers yet. Maybe you can help?

Tags
Checkbox Grid GridLayout
Asked by
Trustin
Top achievements
Rank 1
Iron
Share this question
or