This is a migrated thread and some comments may be shown as answers.
Column Menu - Sort Multiple Checkbox Filter
10 Answers 113 Views
This is a migrated thread and some comments may be shown as answers.
AGB
Top achievements
Rank 1
AGB asked on 07 Mar 2016, 02:33 PM
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

10 Answers, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 09 Mar 2016, 09:25 AM

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!
 
0
AGB
Top achievements
Rank 1
answered on 09 Mar 2016, 11:11 AM

Hi Boyan,

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

Regards

Alan

 

 

0
John
Top achievements
Rank 1
answered on 08 Jan 2019, 02:25 PM
Is there a way to translate the dojo example for asp.net mvc with bound columns and datasource.Ajax?
0
Viktor Tachev
Telerik team
answered on 10 Jan 2019, 11:52 AM
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.
0
John
Top achievements
Rank 1
answered on 10 Jan 2019, 04:46 PM
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.
0
Viktor Tachev
Telerik team
answered on 11 Jan 2019, 12:26 PM
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.

0
Viktor Tachev
Telerik team
answered on 11 Jan 2019, 12:27 PM
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.
0
John
Top achievements
Rank 1
answered on 11 Jan 2019, 02:10 PM
Thanks.  That did it.  I also had to modify the function name to "function onFilterMenuInit(e) {"
0
John
Top achievements
Rank 1
answered on 11 Jan 2019, 02:21 PM
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.
0
Viktor Tachev
Telerik team
answered on 15 Jan 2019, 07:46 AM
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.
Tags
Grid
Asked by
AGB
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
AGB
Top achievements
Rank 1
John
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or