Grid with Excel-like column filters

7 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
    2834 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
    2834 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
    2834 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.
Back to Top