Column Menu - Sort Multiple Checkbox Filter

[AGB]

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

[Boyan Dimitrov]

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

 

 

[AGB]

Hi Boyan,

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

Regards

Alan

 

 

[John]

Is there a way to translate the dojo example for asp.net mvc with bound columns and datasource.Ajax?

[Viktor Tachev]

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

[John]

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.

[Viktor Tachev]

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.

• https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/sort-multi-checkbox-filter

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

[Viktor Tachev]

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.

• https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/sort-multi-checkbox-filter

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

[John]

Thanks.  That did it.  I also had to modify the function name to "function onFilterMenuInit(e) {"

[John]

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.

[Viktor Tachev]

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

[Reggie]

Is there any way to change empty string column descriptions from '' to 'No Data' in the Multi Filter?

[Neli]

Hi Reggie,

When the filter menu is opened in the filterMenuInit event, you can search for the empty spans and change the text with the needed string:

filterMenuInit: function(e){
          var spans = [...$(e.container).find('.k-item span')]          
          var empt = spans.forEach(function(span, i){
            if($(span).text() == ''){
              $(span).text('No Data')
            }            
          });
        },

Here is a Dojo exaple - https://dojo.telerik.com/@NeliKondova/eRoTOLen

I hope this helps.

Regards,

Neli