Hi Team,

I am trying to put checkbox similar to data in grid for particular columns for boolean data comming from API.  But it is taking true and false in place of checkbox for React Ui. Can we achieve checkbox in place of true and false which can be editable through React.

Thanks.

Hello, Rashmi,

This can be done using a custom cell to render the checkbox:

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

Similar to how it is done in our demo, but without the disabled attribute if the checkbox will be editable:

https://www.telerik.com/kendo-react-ui/components/grid/get-started/

This is also an example of an editable Grid with checkboxes:

https://www.telerik.com/kendo-react-ui/components/grid/editing/

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks.

I wanted a checkbox for a particular column which will display checkbox based on boolen value from API. It should not be editable but only display checkbox with checked or unchecked. I want the complete row to be non editable.

Hello, Rashmi,

Thank you for the clarification.

This is use case is using in our Getting Started example for the Discontinued column:

https://www.telerik.com/kendo-react-ui/components/grid/get-started/

Regards,
Stefan
Progress Telerik

Hi Stefan

Thanks.

Is there any property by which we can show only true boolean value of column Discontinued or false boolean value by default in place of both true and false by default.

Hello, Rashmi,

This can be done using a custom reusable cell.

We can make a single boolean cell, and then use it in every Grid where it is needed. This is one the main principle in React, to have many smaller reusable components.

https://stackblitz.com/edit/react-w3rbfn?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks.

We have used custom cell to make checkbox. we have also used filter to swap between checked and unchecked by selecting from drop down of filter. Is there any parameter by which we can show either checked or unchecked on page load.

I have attached the screenshot for your refernce.

Hello, Rashmi,

If we have to show only checked or unchecked values, this is done via filtering.

As the data is filtered outside of the Grid, we can even use buttons outside fo the Grid.

https://stackblitz.com/edit/react-w3rbfn?file=app/main.jsx

Please have in mind that what records are shown in the Grid is generally controlled by the data, not by the Grid. This is why if we have to show only specific data, we have to process the data based on the requirements and pass it to the Grid.

Regards,
Stefan
Progress Telerik