Grid with Excel-like column filters

9 posts, 0 answers
  1. DAN
    DAN avatar
    14 posts
    Member since:
    Aug 2012

    Posted 19 Sep 2017 Link to this post

    I was able to create Excel-like column filters using Filterable(f => f.Multi(true)... But, when the filters are initialized, the checkboxes are all blank and the user has to check what they want to filter on.

    The way Excel behaves is that all checkboxes are selected in a filtered list (see attachment). Users then un-select what they don't want to see.

    I need my column filters to behave the way Excel filters behave.

  2. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 21 Sep 2017 Link to this post

    Hello, DAN,

    Currently, the desired result can be achieved by programmatically selecting the check all checkbox on the filterMenuInit event:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filterMenuInit

    I made example demonstrating this:

    http://dojo.telerik.com/atiYIC

    Please have in mind that we have the excel-like-filter menu under consideration for a built-in property that will create the excel-like-menu, for now, we do not have a specific ETA, but it is our To-Do list.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. DAN
    DAN avatar
    14 posts
    Member since:
    Aug 2012

    Posted 25 Sep 2017 Link to this post

    Can you show me the razor syntax on that one?
  4. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 27 Sep 2017 Link to this post

    Hello, DAN,

    The MVC syntax is similar as this is using only client-side logic.

    The event has to be attached:

    .Events(events => events
        .FilterMenuInit("onFilterMenuInit")
    )

    And the same function to be called on the client:

    <script>
     function onFiltermenuInit(e){
      $(e.container).find('.k-check-all').click()
     }
    </script>

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. DAN
    DAN avatar
    14 posts
    Member since:
    Aug 2012

    Posted 27 Sep 2017 Link to this post

    This is what I have for one of my columns
    columns.Bound(c => c.Position).Width(140).Filterable(
              f => f.Multi(true).Search(true).CheckAll(false).ItemTemplate("ProjectRequests.positionTemplate"))
                    .Locked(true).Lockable(false)
                    .HtmlAttributes(new { Class = "request-details-link", data_id = "#=RequestId#", style = "text-align:left;", title = "#=Position#" });

    If I remove the CheckAll(false) or change it to CheckAll(true) I get the first attached file (a filter with nothing in it)[SelectAllTrue.png]. Otherwise, I get the other attached file without the "check all" option [no-checkall.png].

  6. DAN
    DAN avatar
    14 posts
    Member since:
    Aug 2012

    Posted 27 Sep 2017 in reply to DAN Link to this post

    It looks like it's the ItemTemplate that is causing my issues. I kind of need that since there is a case in one of my filters where there is an empty value. I want that value to look like a checkbox followed by [No Value] and not a checkbox followed by nothing. Judging from the JS errors I am getting it looks like the template styling is being applied before all the content on the page is loaded. Is there a way to apply the item template after the page loads?
  7. Stefan
    Admin
    Stefan avatar
    2887 posts

    Posted 29 Sep 2017 Link to this post

    Hello, DAN,

    In general, the template should work as expected with this approach, the only difference is that the built-in class "k-check-all" is now probably changed inside the template.

    Also, the itemTemplate should be executed just before the filter menu is opened:

    https://dojo.telerik.com/IBAyi 

    If additional assistance is needed, please send a runnable example reproducing the issue and I will gladly assist.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Fredrik
    Fredrik avatar
    53 posts
    Member since:
    Oct 2007

    Posted 5 days and 2 hours ago in reply to Stefan Link to this post

    Any more info on the ETA for an Excel-like filtering in the grid?
  9. Nikolay
    Admin
    Nikolay  avatar
    179 posts

    Posted 1 day and 7 hours ago Link to this post

    Hello Fredrik,

    The Excel-like column filters can be enabled by setting the FIlterbale.Multy property to true:

    columns.Bound(p => p.ProductName).Filterable(ftb => ftb.Multi(true));

    To check all checkboxes in the Filter menu the previously provided code executed in the FilterMenuInit event applies.

    Regards,
    Nikolay
    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