checkbox inside column for boolean data

[Rashmi]

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.

[Stefan]

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

[Rashmi]

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.

[Stefan]

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

[Rashmi]

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.

[Stefan]

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

[Rashmi]

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.

[Stefan]

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

[Daniel]

Hi Stefan.

about Grid Cell how can I use the value from the nested field like "item. weight" in this way?

[Stefan]

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;
}