How to customize Checkbox column in React DataGrid to hide/show conditionally

[Dhavan]

Hi All,

I want to achieve a feature using DataGrid. Lets say we are binding Orders in the grid with Active and Order ID column

1. If Order is "Active" then I would like to show Checkbox to select that row.  The row should be highlighted upon selection just like the default row selection behavior in Kendo React Grid

2. If Order is "inActive" then I would like to hide the checkbox.  I do not want to make it visible disable checkbox.

Please suggest if anyone has done this kind of implementation earlier.  Please suggest any OOTB configuration or customization if we have any for Checkbox Column.

[Filip]

Hi, Dhavan,

The DataGrid doesn’t provide a built-in prop for conditionally rendering checkboxes, but you can achieve this by rendering a custom checkbox, which gives you full control over when and how it appears:

import React from 'react';
import { Checkbox as CustomCheckbox } from 'your-custom-component'; 

const CustomCheckboxCell = (props) => {
    return (
        <td {...props.tdProps}>
            <CustomCheckbox 
                checked={props.dataItem[props.field || '']} 
                onChange={() => props.onSelectionChange(props.dataItem)}
            />
        </td>
    );
};

And then you can use it in the Grid in the following manner:

const GridComponent = () => {
    return (
        <Grid
            data={products}
            selectable="multiple"
            // other grid properties
        >
            <Column field="ProductID" title="ID" width="50px" />
            <Column field="ProductName" title="Product Name" />
            <Column 
                field="Discontinued" 
                title="Discontinued" 
                cells={{data: CustomCheckboxCell}} // Use the custom cell here
            />
        </Grid>
    );
};

export default GridComponent;

In this case, you’ll need to handle the selection change event to make sure the state updates correctly. Please let me know in case further questions arise on this matter and I will gladly assist.

Regards,
Filip
Progress Telerik