This is a migrated thread and some comments may be shown as answers.

checkbox inside column for boolean data

7 Answers 185 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rashmi
Top achievements
Rank 1
Veteran
Rashmi asked on 06 Aug 2020, 12:41 PM

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

Sort by
0
Stefan
Telerik team
answered on 06 Aug 2020, 01:39 PM

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

0
Rashmi
Top achievements
Rank 1
Veteran
answered on 08 Aug 2020, 09:31 AM

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.

0
Stefan
Telerik team
answered on 10 Aug 2020, 07:36 AM

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

0
Rashmi
Top achievements
Rank 1
Veteran
answered on 24 Aug 2020, 07:22 AM

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.

0
Stefan
Telerik team
answered on 24 Aug 2020, 12:16 PM

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).

0
Rashmi
Top achievements
Rank 1
Veteran
answered on 24 Aug 2020, 05:34 PM

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.

0
Stefan
Telerik team
answered on 25 Aug 2020, 12:32 PM

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/.

Daniel
Top achievements
Rank 1
Iron
commented on 25 Nov 2021, 08:13 AM

Hi Stefan.

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

Stefan
Telerik team
commented on 25 Nov 2021, 08:40 AM

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

Tags
General Discussions
Asked by
Rashmi
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Rashmi
Top achievements
Rank 1
Veteran
Share this question
or