I have many grids with a multiple columns that are filtered by a multiple checkboxes - just like excel data filtering (using Asp.Net MVC):

But items in the checkbox list appear in the random order. On a multiple occasions different clients in different projects asked if these can be sorted alphabetically. 

I know I can provide my own list with `.DataSource()` and point to an endpoint that provides the data and that worked for me before on a small scale.

But now I have about 40 grids with average of 3 columns filtered in this fashion and creating 120 endpoints is just not going to fly.

Is there any better way to force sort order on checkbox items?

Ok, I have found this sample: http://dojo.telerik.com/IsOTA and it works on the sample. 

But I'm having trouble getting this to work: `filterMultiCheck.checkSource.view().toJSON()` is thowing exception ".toJSON() is not a function" because `view()` returns an empty array. 

Any way to go about this? Thanks!

 

 Here is my filtereMenuInit function

Hi Graeme,

I have tested the Dojo that you sent, but I was not able to reproduce the issue. Please check the following video and let me know what I missed:

http://screencast.com/t/lbRDDHgMZQL

Regards,
Kiril Nikolov
Telerik

Hi, I have the same issue.  `filterMultiCheck.checkSource.view().toJSON()` is throwing exception ".toJSON() is not a function" 

I have @(Html.Kendo().Grid<ItemsWithDetailModel>()

.Name("itemsGrid")

.Columns(c=>{c.Bound(f=>f.Id).Title("Item Id); c.Bound(f=>f.Employee).Title("Employee").Filterable(ftb=>ftb.Multi(true));})

.Filterable()

.DataSource(ds =>ds.WebApi().ServerOperation(true))

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

)

and

@section scripts{

<script>
        function onFilterMenuInit(e) {
            if (e.field === "Assigned1" || e.field === "Assigned2") {
                var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");
                filterMultiCheck.container.empty();
                filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
                var view = filterMultiCheck.checkSource.view().toJSON();
                filterMultiCheck.checkSource.data(view);
                filterMultiCheck.createCheckBoxes();
            }
        }​

</script>

}

Hello Eugene,

 

Would it be possible to send us a runnable sample where the issue can be reproduced. I have again tried to reproduce the issue, but to no avail, so a runnable sample will help us narrow down the issue.

 

Regards,
Kiril Nikolov
Telerik

I created a sample project. How do I send it to you?

Hello Eugene,

 

You can attach it here, or send us a link from where we can download it. Whatever works best for you.

 

Regards,
Kiril Nikolov
Telerik

I'd like not to create a separate datasource for each filter since it looks like the filter list is created fine with the current configuration, it just needs to be sorted.

See attached.

Hello Eugene,

 

I have tried to reproduce the problem using the code that you shared, but to no avail, please check the following video and let me know what I missed:

 

http://screencast.com/t/UHYmbDCZG8

 

I am also attaching the runnable project.

 

Regards,
Kiril Nikolov
Telerik

Watched your video. Did you notice when you click on Assigned1 and Assigned2, the names in the filter list are not sorted? I need the names sorted alphabetically in the ascending order in that list.

Thanks.

Hello Eugene,

 

The difference in the code comes from the fact that you are using serverOperations, and in that case the approach should be different. Please see the attached project.

 

Regards,
Kiril Nikolov
Telerik

This still doesn't work.  Your screencast at http://screencast.com/t/UHYmbDCZG8 clearly demonstrates this.  Neither columns of Assign 1 or Assign 2 are sorted alphabetically in the filter.  When running your solution, filterMenuInit was not fired.

Here is your repro.  http://dojo.telerik.com/ACOta

If you try var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck"), as shown in some examples, you will skip over the if (filterMultiCheck) { ... } code block because it never exists.

If you try var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoColumnMenu").filterMenu, you can get into the block, but it will fail on the toJSON method because filterMultiCheck.checkSource.view() returns an empty array. 

This needs to be supported.  Saying it is not supported is unacceptable.  No user wants to have to read every item in the filter until they find the item they want to sort with. This is a bug.  Please escalate.

Hello Bill,

 

The main difference in your example is that the columnMenuInit event is used. In this case the column menu container does have slightly different structure compared to the filter menu. This is the reason why you are not able to find the filterMultiCheck using the same selectors.

 

Please refer to the http://dojo.telerik.com/iwEGo example that shows how to achieve this approach with the column menu. 

 

Regards,
Boyan Dimitrov
Telerik

Dear,

I have a grid with multiple columns that are filtered by a multiple checkboxes (using Asp.Net MVC).

I need to sort by name all the filters when the user show filter panels.

This is my definition of grid:

    @(Html.Kendo().Grid<AssessmentTriggerViewModel>()
                .Name("AssessmentTriggerGrid")
                .Columns(columns =>
                {
                    columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' class='chkbx' />")
                                .HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)'/>").Width(30);

                    columns.Bound(c => c.Id).Visible(false);
                    columns.Bound(c => c.UserId).Visible(false).ClientTemplate("<input name=\"UserId\" id =\"UserId\" type=\"input\" value=\"#=UserId#\" />");
                    columns.Bound(c => c.DisplayName).Width(200).Filterable(ftb => ftb.Multi(true).Search(true));
                    columns.Bound(c => c.L1Id).Visible(false);
                    columns.Bound(c => c.L1Name).Width(200).Filterable(ftb => ftb.Multi(true).Search(true));
                    columns.Bound(c => c.ProcessRoleId).Visible(false);
                    columns.Bound(c => c.ProcessRoleName).Width(200).Filterable(ftb => ftb.Multi(true).Search(true));
                    columns.Bound(c => c.RoleTypeId).Visible(false);
                    columns.Bound(c => c.RoleTypeName).Width(100).Filterable(ftb => ftb.Multi(true).Search(true));
                    columns.Bound(c => c.ProfileId).Visible(false);
                    columns.Bound(c => c.ProfileName).Width(300).Filterable(ftb => ftb.Multi(true).Search(true));
                    columns.Bound(c => c.LastAssessmentCompletionDate).Width(100).Format("{0: dd/MM/yyyy}").Filterable(false).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
                    columns.Bound(c => c.LastAssessmentStartDate).Width(100).Format("{0: dd/MM/yyyy}").Filterable(false).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    //.Batch(true)
                    .PageSize(20)
                    .ServerOperation(false)
                    .Model(model =>
                    {
                        model.Id(p => p.Id);
                        model.Field(p => p.UserId);
                        model.Field(p => p.DisplayName);
                        model.Field(p => p.L1Id);
                        model.Field(p => p.L1Name);
                        model.Field(p => p.ProcessRoleId);
                        model.Field(p => p.ProcessRoleName);
                        model.Field(p => p.RoleTypeId);
                        model.Field(p => p.RoleTypeName);
                        model.Field(p => p.ProfileId);
                        model.Field(p => p.ProfileName);
                        model.Field(p => p.BusinessUnitId);
                        model.Field(p => p.BusinessUnitName);
                    })
                    .Events(events =>
                    {
                        events.Error("onErrorGrid('AssessmentTriggerGrid')");
                    })
            .Read(read => read.Action("GetTriggerAssessments", "Assessment"))
            .Sort(sort =>
            {
                sort.Add(x => x.DisplayName);
                sort.Add(x => x.ProfileName);
            })
        )
        .Filterable()
        .Resizable(resize => resize.Columns(true))
        .Scrollable()
        .Sortable(sortable =>
        {
            sortable.AllowUnsort(false);
        })
        .Reorderable(reorderable => reorderable.Columns(true))
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .PageSizes(new int[] { 5, 10, 20, 30 })
            .ButtonCount(5))
        .Events(events =>
        {
            events.DataBound("onDataBoundAssessmentTriggerGrid");
        })
    )

 

Could you please give me a guidelines to solve this issue?

Regards.

Raúl.

 

 

 

Hello Raul,

I would suggest to take a look at the Sort Multiple Checkbox Filter how-to article. 

 

Regards,
Boyan Dimitrov
Telerik

Thank you so much for your response.

Can you translate or redirect me to another page where the code is ASP.Net MVC. I am a rookie in kendo grid functionality and my little experince is based on ASP.Net.

Best Regards.

Raúl

 

 

 

Hello Raul,

In the context of MVC wrappers the logic in the filterMenuInit event handler should remain the same. In order to subscribe for the filterMenuInit event with the Kendo UI Grid for ASP.NET MVC the code should look like: 

Regards,
Boyan Dimitrov
Telerik

Hello Boyan,

Thank you so much. I have already solved the issue.

But now, I have another problem... I have some columns that I allow to have empty values in it. when I show the filter panel in order to filter some item ... this values does not appear in the possible values of filter. i.e. like excel "Blanks".

I have attached some screenshots.

Thanks in advanced.

Raúl

 

 

Hello Boyan,

When I have tried to replicate your solution at the rest of my grids, I realise that it is not working when the field defined in columns is a field belong to another model in the main model.

In my example :

    @(Html.Kendo().Grid<RetractAssessmentViewModel>()
        .Name("RetractAssessmentGrid")
        .Columns(columns =>
        {
            columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' class='chkbx' />")
                        .HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)'/>").Width(30);


            columns.Bound(c => c.AssessmentId).Visible(false);
            columns.Bound(c => c.User.Id).Visible(false);
            columns.Bound(c => c.User.UserNameDescriptive).Width(300).Filterable(ftb => ftb.Multi(true).Search(true)).Title("Participant Names For Selection");

            columns.Bound(c => c.Profile.L1Process.L1Id).Visible(false);
            columns.Bound(c => c.Profile.L1Process.Name).Width(300).Filterable(ftb => ftb.Multi(true).Search(true)).Title("L1 Processes");
            columns.Bound(c => c.Profile.ProcessRole.ProcessRoleId).Visible(false);
            columns.Bound(c => c.Profile.ProcessRole.Name).Width(200).Filterable(ftb => ftb.Multi(true).Search(true)).Title("Process Roles");
            columns.Bound(c => c.RoleType.RoleTypeId).Visible(false);
            columns.Bound(c => c.RoleType.Name).Width(150).Filterable(ftb => ftb.Multi(true).Search(true)).Title("Role Types");

....

        .Reorderable(reorderable => reorderable.Columns(true))
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .PageSizes(new int[] { 5, 10, 20, 30 })
            .ButtonCount(5))
        .Events(events =>
        {
            events.DataBound("onDataBoundRetractAssessmentGrid");
            events.FilterMenuInit("filterMenuInit");
        })
    )

.....

function filterMenuInit(e) {

            if (e.field === "User.UserNameDescriptive" || e.field === "Profile.L1Process.Name" || e.field === "Profile.Name" || e.field === "Profile.ProcessRole.Name") {
                var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
                filterMultiCheck.container.empty();
                filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });

                filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
                filterMultiCheck.createCheckBoxes();
            }
        }

 

If I want to sort the field 'User.UserNameDescriptive' the application send me a warning saying :

Syntax error, unrecognized expression : [data-field=User.NameDescriptive].

I send you an attached screenshot.

Thanks in advanced.

 

Hello Raul,

 

This is a problem with having a period "." in the jQuery selector. Please refer to How do I get jQuery to select elements with a . (period) in their ID? forum discussion.

 

Alternative way is to use an attribute value that does not contain ".". For example the data-title attribute of the column. 

 

Regards,
Boyan Dimitrov
Telerik

Hi Boyan,

Thank you so much. Right now is complete the solution facilited by you.

Can you please take a look to the another issue about the posibility to use a label like in Excel (Blanks) instead of a null when the panel filter is shown in columns with null values? 

Thanks in advanced.

Raúl.

 

 

Hello Raul,

Please refer to the columns.filterable.itemTemplate, which allows customization on the logic that renders the checkboxes when using checkbox filtering.

Regards,
Boyan Dimitrov
Telerik

Dear,

I am using grid filter with multiselect checkboxes and some items in the filter panel do not filter any values when selected.

I don't know if it is some problem in my code or that kendo grid is not working well. I think the problem is in kendo because I haven't any code in my view when selected an item in multiselect checkboxes panel.

The only filter in the page is the column in the screenshots. (Any filter more is ser).

Attached the code of my page and some screenshots.

Could you please help me?

Best Regards.

Raúl.

 

Hello Raul,

 

The problem you are facing seems to be related to a something specific to your project and it is not related to the subject of this forum thread. 

 

Please open a support ticket and attach an isolated runnable example to be able to help you in more efficient way.  

 

Regards,
Boyan Dimitrov
Telerik

Hello Boyan,

How do I implement a filtering in cascade like MS Office?

When you filter a data in the first column ... I want to filter the data that coincide with the first selection in the second filter panel. Right now all the data are appearing.

Thanks in advanced.

Raúl.

 

 

Hello,

Cascading filtering is not supported as a built-in feature of the Kendo UI Grid, so it will require custom coding. In case you have any problems with any of the built-in APIs please isolate the issue in a runnable sample and send it to us, so we can further investigate. Please use a separate support request for that.

Thanks for the understanding.

Regards,
Kiril Nikolov
Telerik by Progress

I know this is kind of an old thread, but I am having trouble sorting the multi-select filters. The issue I am having is the following line:

var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");

returns null;

any ideas?

I meant the filterMultiCheck is null.

Hello DAN,

This logic will work in case of using filter menu, but it will not work with column menu. Please refer to http://dojo.telerik.com/iwEGo example that shows how to find the FilterMultiCheck widget in the column menu. 

Regards,
Boyan Dimitrov
Progress Telerik

Hi Boyan,

 

I followed the same steps to filter Multi select  but i get this error

 

Compiler Error Message: CS1061: 'Kendo.Mvc.UI.Fluent.DataSourceEventBuilder' does not contain a definition for 'FilterMenuInit' and no extension method 'FilterMenuInit' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.DataSourceEventBuilder' could be found (are you missing a using directive or an assembly reference?)

Source Error:


Line 152: // .Change("onChange") Line 153: Line 154:.Events(ev => ev.FilterMenuInit("filterMenuInit")) Line 155: Line 156: