Sort Multicheck filters in Column Menu

[Lucy]

Hello,

I have a Telerik MVC Ajax grid. One each coloumn there is a column menu with sorting and the multicheck filters. I would like the multicheck filters to be sorted a-z.

The ColumnMenuInit event is calling the following code found in another question:

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

However, this isn't working. Any ideas?

Thank you

Lucy

[Preslav]

Hi Lucy,

The provided code looks okay to me. I tested it here: https://dojo.telerik.com/ENIzO and it seems to work as expected.

Could you please elaborate on your exact implementation? I look forward to your reply.


Regards,
Preslav
Progress Telerik

[Lucy]

Hi,

The given example above isn't using the MVC (using Ajax) version of the grid. Could you try with that please?

Thank you

Lucy

[Preslav]

Hi Lucy,

To test the scenario I used the first Grid from the "Filter Multi Checkboxes" demo:

• https://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes

Now, the code looks like:

<div class="demo-section k-content wide">
   <h4>Client Operations</h4>
   @( Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("client")
           .Columns(columns =>
           {
               columns.Bound(p => p.ProductName).Filterable(ftb => ftb.Multi(true).Search(true));
               columns.Bound(p => p.UnitPrice).Width(140).Filterable(ftb => ftb.Multi(true)).Format("{0:c}");
               columns.Bound(p => p.UnitsInStock).Width(140).Filterable(ftb => ftb.Multi(true));
               columns.Bound(p => p.Discontinued).Width(100).Filterable(ftb => ftb.Multi(true));
               columns.Command(command => command.Destroy()).Width(110);
           })
           .ToolBar(toolbar =>
           {
               toolbar.Create();
               toolbar.Save();
           })
           .HtmlAttributes(new { style = "height: 550px;" })
           .Editable(editable => editable.Mode(GridEditMode.InCell))
           .Filterable()
           .Pageable()
           .Navigatable()
           .Sortable()
           .Scrollable(scr=>scr.Height(550))
           .ColumnMenu()
           .Events(e=>e.ColumnMenuInit("onColumnMenuInit"))
           .DataSource(dataSource => dataSource
               .Ajax()
               .Batch(true)
               .PageSize(20)
               .ServerOperation(false)
               .Events(events => events.Error("error_handler"))
               .Model(model => model.Id(p => p.ProductID))
               .Create("Filter_Multi_Editing_Create", "Grid")
               .Read("Filter_Multi_Editing_Read", "Grid")
               .Update("Filter_Multi_Editing_Update", "Grid")
               .Destroy("Filter_Multi_Editing_Destroy", "Grid")
           )
   )
    </div>
   <script type="text/javascript">
       function error_handler(e) {
           if (e.errors) {
               var message = "Errors:\n";
               $.each(e.errors, function (key, value) {
                   if ('errors' in value) {
                       $.each(value.errors, function () {
                           message += this + "\n";
                       });
                   }
               });
               alert(message);
           }
       }

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

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

It seems to work as expected on my side, please check this video:

• https://www.screencast.com/t/6FUehRXa5svJ

Please, elaborate on the exact scenario of your project.


Regards,
Preslav
Progress Telerik

[Lucy]

Hi Preslav,

 

I have the same setup as the example given apart from in the 'Datasource' I have ServerOperation set to true. If I set that to false it works as expected. However, we wish this to be true.

Thank you

Lucy

[Preslav]

Hello Lucy,

The described problem comes from the fact that the data is not on the client, thus, we cannot use methods such as sort, view, data, etc. This is due to the fact that some time is required for the request and the response from the server with the sorted data.

To overcome this, I would suggest using one of the following workarounds:

1) Use an approach similar to the one outlined in the "Sort MultiCheck Filter" KB article:

• https://docs.telerik.com/kendo-ui/knowledge-base/sort-multi-check-filter-mvc-grid

2) Bind to the requestEnd event of the checkSource and use a timeout to create the checkboxes:

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

Personally, I would recommend the first approach.

I hope the above helps.


Regards,
Preslav
Progress Telerik