Grid filter with multiselect checkboxes: sort items alphabetically?

26 posts, 0 answers
  1. Graeme
    Graeme avatar
    5 posts
    Member since:
    May 2011

    Posted 20 Aug 2015 Link to this post

    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?

  2. Graeme
    Graeme avatar
    5 posts
    Member since:
    May 2011

    Posted 20 Aug 2015 in reply to Graeme Link to this post

    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();
        }
    }

  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 24 Aug 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Eugene
    Eugene avatar
    4 posts
    Member since:
    Jun 2010

    Posted 01 Oct 2015 in reply to Kiril Nikolov Link to this post

    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>

    }

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 02 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Eugene
    Eugene avatar
    4 posts
    Member since:
    Jun 2010

    Posted 05 Oct 2015 in reply to Kiril Nikolov Link to this post

    I created a sample project. How do I send it to you?
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 06 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Eugene
    Eugene avatar
    4 posts
    Member since:
    Jun 2010

    Posted 06 Oct 2015 Link to this post

    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.

  10. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 08 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Eugene
    Eugene avatar
    4 posts
    Member since:
    Jun 2010

    Posted 08 Oct 2015 Link to this post

    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.

  12. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 12 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 30 Mar in reply to Kiril Nikolov Link to this post

    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.

  14. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 07 Jun Link to this post

    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.

     

     

     

  16. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 09 Jun Link to this post

    Hello Raul,

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

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 09 Jun in reply to Boyan Dimitrov Link to this post

    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

     

     

     

  18. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 13 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  19. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 13 Jun in reply to Boyan Dimitrov Link to this post

    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

     

     

  20. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 14 Jun in reply to Boyan Dimitrov Link to this post

    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.

     

  21. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 15 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  22. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 16 Jun in reply to Boyan Dimitrov Link to this post

    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.

     

     

  23. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 20 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  24. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 22 Jun Link to this post

    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.

     

  25. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  26. Raul
    Raul avatar
    15 posts
    Member since:
    Apr 2016

    Posted 14 Jul in reply to Raul Link to this post

    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.

     

     

  27. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 18 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready