Column Menu - Sort Multiple Checkbox Filter

11 posts, 1 answers
  1. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 07 Mar 2016 Link to this post

    Hi Guys

    I have been using the technique as outlined in the 'How To' article 'Sort Multiple Checkbox Filter'
    to sort the data prior to showing the filter menu.

    This works fine when called from filterMenuInit but I can see this event is not fired when using Column Menus.

    Moving the code into the columnMenuInit event results in an

        Uncaught TypeError: Cannot read property 'data' of undefined

    when executing the following statement

        var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
        
    I have trawled through the How To articles and forums looking for a solution to the problem but have so far drawn a blank.

    Therefore any help would be much appreciated.

    Regards
    Alan

  2. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 09 Mar 2016 Link to this post

    Hello AGB,

     

    In case of using column menu the multi filter check box widget will be initialized from different element. I modified the how-to example in order to work with column menu and sort the items in the multi filter check box: http://dojo.telerik.com/IHAzO

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. AGB
    AGB avatar
    71 posts
    Member since:
    Sep 2014

    Posted 09 Mar 2016 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    Thanks for the updated dojo example ... It works a treat.

    Regards

    Alan

     

     

  4. John
    John avatar
    36 posts
    Member since:
    Nov 2018

    Posted 08 Jan 2019 in reply to Boyan Dimitrov Link to this post

    Is there a way to translate the dojo example for asp.net mvc with bound columns and datasource.Ajax?
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2500 posts

    Posted 10 Jan 2019 Link to this post

    Hello John,

    The approach with the Grid MVC wrapper will be very similar. The main difference would be how the handler for ColumnMenuInit event is defined. 

    @( Html.Kendo().Grid<ProductViewModel>()
            .Name("grid")
             
            // omitted for brevity
             
            .Filterable()
            .ColumnMenu()
            .Events(e=>e.ColumnMenuInit("onColumnMenuInit"))
             
            .DataSource(dataSource => dataSource
                // data source configuration
            )
    )


    JavaScript:

    function onColumnMenuInit(e) {
         
        if (e.field === "UnitPrice" || e.field === "UnitsInStock") {
            var filterMultiCheck = e.container.find(".k-filterable").data("kendoFilterMultiCheck");
            filterMultiCheck.container.empty();
            filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
     
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }
    }


    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. John
    John avatar
    36 posts
    Member since:
    Nov 2018

    Posted 10 Jan 2019 in reply to Viktor Tachev Link to this post

    Thanks.  It's working but I had to include the .ColumnMenu() as you showed above.  I would really like to avoid having the column menu.  Is that possible?  If not, how can I turn off the column configuration feature?  i.e. .ColumnMenu().Columns(false)?  False doesn't work.  I'm not sure what parameter it is looking for.
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2500 posts

    Posted 11 Jan 2019 Link to this post

    Hello John,

    For sorting the multi-checkbox items when the Grid is not using column menu the approach will be a bit different. You need to handle the filterMenuInit event. Also the getting reference of the FilterMultiCheck widget would be a bit different. The article below illustrates the approach.


    The code snippets below show how this will work with the MVC wrapper.

    @( Html.Kendo().Grid<ProductViewModel>()
        .Name("grid")
          
        // omitted for brevity
          
        .Filterable()
        .Events(e=>e.FilterMenuInit("onFilterMenuInit"))
          
        .DataSource(dataSource => dataSource
            // data source configuration
        )
    )


    JavaScript:

    function onColumnMenuInit(e) {
        if (e.field === "UnitPrice" || e.field === "UnitsInStock") {
            var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");
            filterMultiCheck.container.empty();
            filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
     
            // uncomment the following line to handle any grouping from the original dataSource:
            // filterMultiCheck.checkSource.group(null);
     
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }
    }


    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2500 posts

    Posted 11 Jan 2019 Link to this post

    Hello John,

    For sorting the multi-checkbox items when the Grid is not using column menu the approach will be a bit different. You need to handle the filterMenuInit event. Also the getting reference of the FilterMultiCheck widget would be a bit different. The article below illustrates the approach.


    The code snippets below show how this will work with the MVC wrapper.

    @( Html.Kendo().Grid<ProductViewModel>()
        .Name("grid")
          
        // omitted for brevity
          
        .Filterable()
        .Events(e=>e.FilterMenuInit("onFilterMenuInit"))
          
        .DataSource(dataSource => dataSource
            // data source configuration
        )
    )


    JavaScript:

    function onFilterMenuInit(e) {
        if (e.field === "UnitPrice" || e.field === "UnitsInStock") {
            var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");
            filterMultiCheck.container.empty();
            filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
     
            // uncomment the following line to handle any grouping from the original dataSource:
            // filterMultiCheck.checkSource.group(null);
     
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }
    }


    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. John
    John avatar
    36 posts
    Member since:
    Nov 2018

    Posted 11 Jan 2019 in reply to Viktor Tachev Link to this post

    Thanks.  That did it.  I also had to modify the function name to "function onFilterMenuInit(e) {"
  10. John
    John avatar
    36 posts
    Member since:
    Nov 2018

    Posted 11 Jan 2019 in reply to John Link to this post

    Also, the link that you provided is to API syntax.  Is there an easy way to translate that into the syntax I'm looking for?  For instance, events and onFilterMenuInit isn't listed in the example.  I'm having trouble translating examples from one implementation approach to another.
  11. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2500 posts

    Posted 15 Jan 2019 Link to this post

    Hello John,

    The UI for ASP.NET MVC Grid component is actually a wrapper of the jQuery Kendo Grid widget. Thus, when customizing the functionality of the component you would need JavaScript. The handler for the filterMenuInit event will be exactly the same for the jQuery and MVC widgets. There will be difference only on how the event handler is specified:


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




    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top