Sort Multicheck filters in Column Menu

6 posts, 0 answers
  1. Lucy
    Lucy avatar
    8 posts
    Member since:
    Nov 2016

    Posted 01 Feb Link to this post

    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

  2. Preslav
    Admin
    Preslav avatar
    379 posts

    Posted 02 Feb Link to this post

    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.
  3. Lucy
    Lucy avatar
    8 posts
    Member since:
    Nov 2016

    Posted 06 Feb in reply to Preslav Link to this post

    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

  4. Preslav
    Admin
    Preslav avatar
    379 posts

    Posted 07 Feb Link to this post

    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.
  5. Lucy
    Lucy avatar
    8 posts
    Member since:
    Nov 2016

    Posted 15 Feb in reply to Preslav Link to this post

    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

  6. Preslav
    Admin
    Preslav avatar
    379 posts

    Posted 19 Feb Link to this post

    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.
Back to Top