How to style the new columnType checkbox

[Akshay]

Hi I am using the new statemanagement with checkboxes https://www.telerik.com/kendo-react-ui/components/grid/selection/multi-row-selection#combining-selection-with-data-operations-filtering-sorting-paging-etc

I want to replace that checkbox with our own design library's checkbox and style accordingly.

There's currently no way apart from inspecting and styling the component, would you guys suggest some ways to achieve this?

[Vessy]

Hi, Akshay,

Your assumption is correct - currently, you can style/replace the checkbox from the built-in checkbox column either by overwriting its rendering, or by applying custom CSS styles to it.

In case you decide to go in this direction, you can see how to define a custom cell component that uses your design library's checkbox Use this custom cell in your Grid component by specifying it in the cell property of the GridColumn.

import React from 'react';
import { Checkbox as CustomCheckbox } from 'your-design-library'; // Import your custom checkbox

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

const MyGrid = () => {
    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 MyGrid;

Handle Selection Change

In this scenario you will need to ensure you handle the selection change to update your state accordingly. You can pass a handler to the custom cell component if needed.

For more details on custom cells, you can refer to the KendoReact documentation:

• https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-cells

I hope the provided information will be helpful for you.

Regards,

Vessy
Progress Telerik

[Akshay]

Is it possible that in near future it will be more customizable? 

[Vessy]

Hi, Akshay,

We do not have plans for such improvement for the moment but you can submit a feature request for it and we will consider its implementation based on the demand for it:

• https://feedback.telerik.com/kendo-react-ui