Checkbox filter based on grid data

11 posts, 1 answers
  1. David
    David avatar
    25 posts
    Member since:
    Sep 2019

    Posted 18 Sep 2020 Link to this post

    The Kendo documentation on how to implement a checkbox list to filter grid column data uses an example ColumnMenu component with hardcoded data. Is it possible to provide an example of how this can be done using the grid data instead?
  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 22 Sep 2020 Link to this post

    Hello, David,

    Yes, this is possible by passing the data as a prop to the ColumnMenu:

    https://stackblitz.com/edit/react-az8hrs?file=app%2Fmain.jsx

    I hope this is helpful.

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

  3. David
    David avatar
    25 posts
    Member since:
    Sep 2019

    Posted 22 Sep 2020 in reply to Stefan Link to this post

    Thanks Stefan. Is it possible to sort the list as well?
  4. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 22 Sep 2020 Link to this post

    Hello, David,

    Yes, the data that is passed to the ColumnMenu is passed from the developer.

    This means that the developer can process the data as needed, sorted, filtered, etc:

    https://stackblitz.com/edit/react-az8hrs?file=app%2FcolumnMenu.jsx

    The CheckBoxFilter will render the items that it receives in from the data property, this means we can apply any required data operations to the collection based on the application requirements.

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

  5. David
    David avatar
    25 posts
    Member since:
    Sep 2019

    Posted 23 Sep 2020 in reply to Stefan Link to this post

    Great, thanks for your help Stefan.
  6. David
    David avatar
    25 posts
    Member since:
    Sep 2019

    Posted 07 Dec 2020 Link to this post

    Hi Stefan,

    Is it possible to set the width of the ColumnMenu? It seems to be fixed and for most applications this results in the options being truncated.

    Kind regards,

    David

  7. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 07 Dec 2020 Link to this post

    Hello, David,

    This can be done in two way:

    1) Using CSS - The following CSS rule will set the widht of the ColumnMenu for all column menus on the page:

    .k-grid-columnmenu-popup {
      width: 400px;
    }
    2) Using the ref of the column menu component to apply it to a specific column menu:

    https://stackblitz.com/edit/react-dtx3tz?file=app%2FcolumnMenu.jsx (only for the ProductID column)

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

  8. David
    David avatar
    25 posts
    Member since:
    Sep 2019

    Posted 07 Dec 2020 in reply to Stefan Link to this post

    Thanks Stefan,

    So there's no way to do this dynamically, or automatically like for jQuery? The data in these grids will change over time so setting a fixed width isn't ideal.

    Kind regards,

    David

  9. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 07 Dec 2020 Link to this post

    Hello, David,

    The ref approach is dynamic as you can update it on each componentDidUpdate( or useEffect).

    Could you please share the acceptable results that are working for the Kendo UI for jQuery menu, and we will see how the same can be done for React?

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

  10. David
    David avatar
    25 posts
    Member since:
    Sep 2019

    Posted 07 Dec 2020 in reply to Stefan Link to this post

    Hi Stefan,

    Please see this demo: https://demos.telerik.com/aspnet-core/grid/filter-multi-checkboxes

    The filter menu width automatically adjusts to fit the content.

    Kind regards,

    David

  11. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 07 Dec 2020 Link to this post

    Hello, David,

    Thank you for the clarification.

    We are planning to add this feature for the columns and the logic for the column menu will be similar.

    I can suggest voting for this feature and commenting that it will be nice to have it for the column menu as well:

    https://feedback.telerik.com/kendo-react-ui/1494821-grid-column-width-auto-sizing-is-not-available

    This will increase its chances to be implemented sooner.

    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