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.
7 Answers, 1 is accepted
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
Rank 1
Veteran
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
Rank 1
Veteran
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
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
Rank 1
Veteran
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
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
about Grid Cell how can I use the value from the nested field like "item. weight" in this way?
Hello, Daniel,
We can use an approach to get the nested field values:
let fieldComplex = props.field.split('.');
const { dataItem } = props;
const dataValue =
dataItem[fieldComplex[0]] === null || dataItem[fieldComplex[0]][fieldComplex[1]] === null
? ''
: dataItem[fieldComplex[0]][fieldComplex[1]];Also, internally we use this utility function to get a nested value:
function getNestedValue(fieldName: string | undefined, dataItem: any): any {
const path = (fieldName || '').split('.');
let data = dataItem;
path.forEach((p) => {
data = data ? data[p] : undefined;
});
return data;
}