checkbox inside column for boolean data

8 posts, 0 answers
  1. Rashmi
    Rashmi avatar
    12 posts
    Member since:
    Jun 2020

    Posted 06 Aug 2020 Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 06 Aug 2020 Link to this post

    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

  3. Rashmi
    Rashmi avatar
    12 posts
    Member since:
    Jun 2020

    Posted 08 Aug 2020 Link to this post

    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.

  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 10 Aug 2020 Link to this post

    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

  5. Rashmi
    Rashmi avatar
    12 posts
    Member since:
    Jun 2020

    Posted 24 Aug 2020 in reply to Stefan Link to this post

    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.

  6. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 24 Aug 2020 Link to this post

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

  7. Rashmi
    Rashmi avatar
    12 posts
    Member since:
    Jun 2020

    Posted 24 Aug 2020 in reply to Stefan Link to this post

    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.

  8. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 25 Aug 2020 Link to this post

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

Back to Top