Grid filter with multiselect checkboxes: sort items alphabetically?

[Graeme]

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

columns.Bound(m => m.Status).Groupable(true).Filterable(ftb => ftb.Multi(true));

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?

[Graeme]

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

function filterMenuInit(e) {
    if (e.field === "MyColumnName") {
        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();
        var json = view.toJSON();

        filterMultiCheck.checkSource.data(json);
        filterMultiCheck.createCheckBoxes();
    }
}

[Kiril Nikolov]

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

 

 

[Eugene]

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>

}

[Kiril Nikolov]

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

 

 

[Eugene]

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

[Kiril Nikolov]

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

 

 

[Eugene]

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.

[Kiril Nikolov]

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

 

 

[Eugene]

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.

[Kiril Nikolov]

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

 

 

[Bill]

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.

[Boyan Dimitrov]

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

 

 

[Raul]

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.

 

 

 

[Boyan Dimitrov]

Hello Raul,

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

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Raul]

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

 

 

 

[Boyan Dimitrov]

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: 

@(Html.Kendo().Grid<KendoGridBatchEditing.Models.ProductViewModel>()
      .Name("grid")
      .Columns(columns =>
      {
          columns.Bound(product => product.ProductName).Filterable(fil => fil.Multi(true));
          ....
      })
      .Filterable()
      .Events(ev => ev.FilterMenuInit("filterMenuInit"))
      ..
      .DataSource(dataSource =>
          dataSource.Ajax()
          .ServerOperation(false)

            .Model(model =>
            {
                model.Id(product => product.ProductID); // Specify the property which is the unique identifier of the model
                model.Field(product => product.ProductID).Editable(false); // Make the ProductID property not editable
            })
           ...
      )
      .Pageable()
)

<script>
    function filterMenuInit(e) {
        if (e.field === "ProductName" || 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"});

            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }
    }
</script>

Regards,
Boyan Dimitrov
Telerik

 

 

[Raul]

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

 

 

[Raul]

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.

 

[Boyan Dimitrov]

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

 

 

[Raul]

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.

 

 

[Boyan Dimitrov]

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

 

 

[Raul]

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.

 

[Boyan Dimitrov]

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

 

 

[Raul]

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.

 

 

[Kiril Nikolov]

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

 

 

[DAN]

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?

[DAN]

I meant the filterMultiCheck is null.

[Boyan Dimitrov]

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

[lisha]

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:

[lisha]

HI Rahul,

 

Can you assist me...I have exactly the same problem as you were having then..

[lisha]

Here is my Code ..am using ASP MVC

 

<div id="resultGrid">
        @(Html.Kendo().Grid<LNTRenewalManagementSystem.Repository.Models.NJRenewal>()
        .Name("NJRenewalGrid")
                  .Columns(columns =>
            {
                columns.Bound(c => c.FUM_ID).Hidden();            
                columns.Bound(c => c.EVENT_ID).Hidden();
                //columns.Bound(c => c.CLIENT_ID).Width(80).Title("CLIENT").Filterable(ftb => ftb.Multi(true));
                columns.Bound(c => c.CLIENT_ID).Width(80).Title("CLIENT").Filterable(ftb => ftb.Multi(true));
                columns.Bound(c => c.RENEWAL_DATE).Width(100).Format("{0:MM/dd/yyyy}").Title("RENEWAL"); 
                columns.Bound(c => c.EVENTSTATUS).EditorTemplateName("AtlasEventTypeDropDown").Width(130);
                columns.Bound(c => c.COMMENTS).Width(250).Filterable(true);
               // columns.Bound(c => c.COMMENTS).Width(250).EditorTemplateName("TextAreaEditor").Filterable(true);
                columns.Bound(c => c.VEHICLE_NO).Width(60).Title("VEH").Filterable(false);
                columns.Bound(c => c.PLATE_NO).Width(60).Title("PLATE").Filterable(false);
                columns.Bound(c => c.VIN).Width(120).Filterable(false);
                columns.Bound(c => c.TITLE_TO).Width(65).Title("Title");
                columns.Bound(c => c.STATE_CHG_ID).Width(30).Title("SC").Filterable(false);
                columns.Bound(c => c.POLICY_NUMBER).Width(120).Title("POLICY");
                columns.Bound(c => c.CARRIER_NAME).Width(250).Title("CARRIER");
                columns.Bound(c => c.FID).Width(80).Filterable(false);          
                columns.Bound(c => c.STATUS).Width(100).Filterable(ftb => ftb.Multi(true));
            })

                    .ToolBar(tools =>
                    {
                        tools.Excel();
                        tools.Save();
                    }
                        ).Scrollable(s => s.Enabled(true).Height(750))
           
                    .Excel(excel => excel
                    .FileName("NJRenewals.xlsx")
                    .AllPages(true)
                  )
                    .Sortable()
 
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                    .Filterable()
                    .Events(events =>
        {
            events.DataBound("NJRenewalGrid");
            events.columnMenuInit("filterMenuInit");
        })
              
                    .Resizable(resize => resize.Columns(true))
                              .Scrollable(s => s.Height("auto"))
                   
                    .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
                
                    .DataSource(dataSource => dataSource
                    .Ajax()
                     .Batch(true)
                    .Read(read => read.Action("GetNJRenewalRecords", "RenewalState"))
                                           .Update(update => update.Action("UpdateAtlasEvents", "RenewalState"))
                    .PageSize(200)
                       
                    .Model(mod =>
                    {
                        mod.Id(com => com.FUM_ID);
                        mod.Field(com => com.TITLE_TO).Editable(false);
                        mod.Field(com => com.CLIENT_ID).Editable(false);
                        mod.Field(com => com.VEHICLE_NO).Editable(false);
                        mod.Field(com => com.VIN).Editable(false);
                        mod.Field(com => com.PLATE_NO).Editable(false);
                        mod.Field(com => com.FID).Editable(false);
                        mod.Field(com => com.CARRIER_NAME).Editable(false);
                        mod.Field(com => com.POLICY_NUMBER).Editable(false);
                        mod.Field(com => com.RENEWAL_DATE).Editable(false);
                        mod.Field(com => com.STATUS).Editable(false);
                        mod.Field(com => com.COMMENTS).Editable(true);
                   
                    })

 

--------------------------------------------------------------------------------------------------------

 

function filterMenuInit(e) {

        //alert(e.field);
       
        if (e.field === "CLIENT_ID") {
                      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();

                   }

 

 

 

 

 

[Boyan Dimitrov]

Hello,

I noticed in the provided code that the server operations are not disabled (by default the Kendo UI Grid for ASP.NET MVC enables server operations). This will make a bit harder to sort the multi filter checkbox since not all of them are loaded with the initial read. In the following forum thread you can find a custom solution for requesting all multi filter check box values in order to sort them. This approach contains some of custom logic related to requests to the server and might be not suitable in scenarios with lots of data (can cause performance hit).  

Regards,
Boyan Dimitrov
Progress Telerik

[lisha]

Hi Boyan,

 

I changed the code, but still not able to acheive the results.

 <div id="resultGrid">
        @(Html.Kendo().Grid<LNTRenewalManagementSystem.Repository.Models.NJRenewal>()
        .Name("NJRenewalGrid")
           
                  .Columns(columns =>
            {
                columns.Bound(c => c.FUM_ID).Hidden();            
                columns.Bound(c => c.EVENT_ID).Hidden();
               columns.Bound(c => c.CLIENT_ID).Width(80).Title("CLIENT").Filterable(ftb => ftb.Multi(true));                   
                columns.Bound(c => c.RENEWAL_DATE).Width(100).Format("{0:MM/dd/yyyy}").Title("RENEWAL"); 
                columns.Bound(c => c.EVENTSTATUS).EditorTemplateName("AtlasEventTypeDropDown").Width(130);
                columns.Bound(c => c.COMMENTS).Width(250).Filterable(true);               
                columns.Bound(c => c.VEHICLE_NO).Width(60).Title("VEH").Filterable(false);
                columns.Bound(c => c.PLATE_NO).Width(60).Title("PLATE").Filterable(false);
                columns.Bound(c => c.VIN).Width(120).Filterable(false);
                columns.Bound(c => c.TITLE_TO).Width(65).Title("Title");
                columns.Bound(c => c.STATE_CHG_ID).Width(30).Title("SC").Filterable(false);
                columns.Bound(c => c.POLICY_NUMBER).Width(120).Title("POLICY");
                columns.Bound(c => c.CARRIER_NAME).Width(250).Title("CARRIER");
                columns.Bound(c => c.FID).Width(80).Filterable(false);          
                columns.Bound(c => c.STATUS).Width(100).Filterable(ftb => ftb.Multi(true));
            })

                    .ToolBar(tools =>
                    {
                        tools.Excel();
                        tools.Save();
                    }
                        ).Scrollable(s => s.Enabled(true).Height(750))
                         
           
                    .Excel(excel => excel
                    .FileName("NJRenewals.xlsx")
                    .AllPages(true)
                  )
                    .Sortable()
 
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                    .Filterable()
              
                            .ColumnMenu()
                          .Events(events=> events.ColumnMenuInit("onColumnMenuInit"))
              
                    .Resizable(resize => resize.Columns(true))
                              .Scrollable(s => s.Height("auto"))
                   
                    .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                   
                    .ButtonCount(5))
                
                    .DataSource(dataSource => dataSource
                    .Ajax()
                     .Batch(true)
                    .Read(read => read.Action("GetNJRenewalRecords", "RenewalState"))
                                           .Update(update => update.Action("UpdateAtlasEvents", "RenewalState"))
                    .ServerOperation(false)
                    .PageSize(200)
                       
                    .Model(mod =>
                    {
                        mod.Id(com => com.FUM_ID);
                        mod.Field(com => com.TITLE_TO).Editable(false);
                        mod.Field(com => com.CLIENT_ID).Editable(false);
                        mod.Field(com => com.VEHICLE_NO).Editable(false);
                        mod.Field(com => com.VIN).Editable(false);
                        mod.Field(com => com.PLATE_NO).Editable(false);
                        mod.Field(com => com.FID).Editable(false);
                        mod.Field(com => com.CARRIER_NAME).Editable(false);
                        mod.Field(com => com.POLICY_NUMBER).Editable(false);
                        mod.Field(com => com.RENEWAL_DATE).Editable(false);
                        mod.Field(com => com.STATUS).Editable(false);
                        mod.Field(com => com.COMMENTS).Editable(true);
                   
                    })


                                   .Events(events => events
                                            .Error("onError")
                                            .Change("onChange")
                                            
                                        

                                       

        )

                    )
        )
----------------------------------------------------------------------------------------

 function onColumnMenuInit(e) {
        if (e.field === "CLIENT_ID") {
            debugger;
            var filterMultiCheck = e.container.find(".k-filterable").data("kendoFilterMultiCheck");
            filterMultiCheck.checkSource.one("requestEnd", function () {

                filterMultiCheck.container.empty();
                filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
                filterMultiCheck.checkSource.one("requestEnd", function (ev) {
                    setTimeout(function () {

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

        }
    }

------------------

Please find the attached png where the client_id is still not sorted

[lisha]

Finally it worked.. i removed   checksource code, but is there any way to remove the sorting ascending , sorting descending and the column menu.. i only need Filter..

 

  function onColumnMenuInit(e) {
        if (e.field === "CLIENT_ID") {
          
            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();
           
        }
    }

[Boyan Dimitrov]

Hello,

The easiest way to achieve the desired behavior is to remove the  .ColumnMenu() from the grid configuration code. In this case only the filter menu for the column will be shown. Instead of using the ColumnMenuInit event the FilterMenuInit should be used. The logic for finding the element used to initialize the Kendo UI FilterMultiCheckbox widget should be slightly change as shown in the code below: 

filterMenuInit: function(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"});

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

Regards,
Boyan Dimitrov
Progress Telerik

[lisha]

HI Boyan,

I still have multi level grid sorting issue in a different scenario. Previous post has my code, but was able to replicate it with one of the famous telerik example 

 https://dojo.telerik.com/ENIzO

1.Click on the unitprice and sort is based on 30$, if you don’t have. change it for some of the records and save it. It will be shown as below. The product Name will be sorted alphabetically.

2.After sorting based on the unit price change the value of units in stock for one of the record, I did change for Northwood’s Cranberry Sauce and click on Save button

3.After sorting based on the unit price change the value of units in stock for one of the record, I did change for Northwood’s Cranberry Sauce and click on Save button

Attached the document for your reference. Can you please help me with this. 

[Boyan Dimitrov]

Hello,

First I would like to mention that sorting is not enabled for the grid in the provide dojo. I am not sure that I am missing something because I am not able to sort any of the columns. I tried to filter grid and change the unit price for a single record, save it and then open the filter menu and everything works fine. Please refer to the attached image. 

Regards,
Boyan Dimitrov
Progress Telerik

[lisha]

The product name is filtered using columnmenu init in the dojo.. after following my steps .. please check the product name which will not be sorted alphabetically.In my code i am using filtermenuinit and experiencing same issue

 

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

 

[Boyan Dimitrov]

Hello,

I am afraid that I am still not able to replicate a problem with the https://dojo.telerik.com/ENIzO example. I would suggest to record a video that shows the exact steps of reproducing the issue with the example. This way we will be able to investigate this behavior and provide some suggestions. 

Regards,
Boyan Dimitrov
Progress Telerik

[Abhishek]

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

This code did not work for me for FilterMenuInit event but worked for FilterMenuOpen. Any idea why that would be ?

It seems checksource.view() is returning empty array for FilterMenuInit.

 

 

 

 

[Abhishek]

function filterMenuInit(e) {
        if (e.field === "ProductName" || 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"});
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }
    }

[Boyan Dimitrov]

Hello,

Our Sort Multiple Checkbox Filter help article actually uses the filterMenuInit event to sort the check boxes values. I just tested and it worked fine. Could you please open the sample code, modify the code and share the modified example to see why it does not work? 

Regards,
Boyan Dimitrov
Progress Telerik

[Bruno]

Hi Boyan,

 

I took your example, it works the checkbox is well classified in alphabetical order.

However, the cascade filter no longer works. When I have a single line from the first filter, I have all of the possible values available in the filter.

My demo : http://dojo.telerik.com/ekEcUFez

 

Thanks you !

[Alex Hajigeorgieva]

Hello, Bruno,

The example that we have in the knowledge base section for excel-like filtering sorts the data in the filter.

Can you have a look at it and let us know what specific issue you are trying to solve that perhaps has not become clear to us in this last forum post?

https://docs.telerik.com/kendo-ui/knowledge-base/grid-with-excel-like-filter

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Bruno]

Hi,

 

I need just $39.00 and I have all in this example : (Capture.PNG)

http://dojo.telerik.com/ekEcUFez/5

 

Thanks you !

[Alex Hajigeorgieva]

Hi, Bruno,

Thank you for sharing the Dojo.

If you compare the knowledge base article and the provided Dojo - you will notice what is preventing the example to filter like excel:

1. There is a condition in the provided example that uses only the ProductName and UnitsInStock. To include the UnitPrice field the condition should be removed or changed accordingly
2. The filterMenuInit function is going to be executed only once. In the case of excel-like filtering, we want the function called every time the popup opens, so we bind it to the open event of the popup. At this point, we remove the duplicate values for the respective field and set the view() of the grid data source to the filter data source
   

            filterMenuInit: function(e) {
               var grid = e.sender;
               e.container.data("kendoPopup").bind("open", function() {
                 filterSource.sort({field: e.field, dir: "asc"});
                 var uniqueDsResult = removeDuplicates(grid.dataSource.view(), e.field);
                 filterSource.data(uniqueDsResult);
               })
             }

3. All filter menus share the same data source which is defined via the columns.filterable.dataSource setting
   

   { field: "ProductName", filterable: { multi: true, dataSource: filterSource } },
   { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120, filterable: { multi: true, dataSource: filterSource } },
   { field: "UnitsInStock", title: "Units In Stock", width: 120, filterable: { multi: true, dataSource: filterSource } },

4. We bind a change dataSource event and set the data to the filter menus data source

$("#client").kendoGrid({
          dataSource: {
            change: function(e){
              filterSource.data(e.items);
            },

Here is the example you provided with the changes from the knowledge base article:

http://dojo.telerik.com/ekEcUFez/7

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Dhara]

Hi,

We want to display the filter icon highlighted whenever the filters are selected using Kendo React grid.
we have implemented this example: https://www.telerik.com/kendo-react-ui/knowledge-base/filter-the-grid-with-checkboxes/

 

But not able to highlight the filter icon when one/multiple filter checkboxes are selected. We were able to find the solution in jquery (https://docs.telerik.com/kendo-ui/knowledge-base/sort-multi-checkbox-filter)
But could not find similar option to filterable: { multi: true } } in KendoReact.

[Alex Hajigeorgieva]

Hi, Dhara,

The Kendo React Grid is a different suite and you should post your question in the Kendo React forums or in a private support ticket instead:

https://www.telerik.com/forums/kendo-ui-react/kendoreact-general-discussions

The React Grid features the multi checkbox filter as part of its column menu:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-column-menu-filter

Kind Regards,
Alex Hajigeorgieva
Progress Telerik