This is a migrated thread and some comments may be shown as answers.

Sort Multicheck filters in Column Menu

5 Answers 371 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lucy
Top achievements
Rank 1
Lucy asked on 01 Feb 2018, 02:45 PM

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

5 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 02 Feb 2018, 04:43 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lucy
Top achievements
Rank 1
answered on 06 Feb 2018, 11:15 AM

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

0
Preslav
Telerik team
answered on 07 Feb 2018, 11:31 AM
Hi Lucy,

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

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:
Please, elaborate on the exact scenario of your project.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lucy
Top achievements
Rank 1
answered on 15 Feb 2018, 12:58 PM

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

0
Preslav
Telerik team
answered on 19 Feb 2018, 11:56 AM
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:
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Lucy
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Lucy
Top achievements
Rank 1
Share this question
or