Edit this page

Group Filter Checkboxes in Grid by Another Field

Environment

Product Progress Kendo UI Grid

Description

How to group the checkboxes in the filter menu by a specific field?

Solution

Although that sorting the checkboxes dataSource is possible, applying group expression to it will break the built-in functionality of the Grid. However, we can sort the checkboxes dataSource by the field that we want to group by and manually insert group separators. In the example below, the entire logic for grouping the checkboxes is within the filterMenuOpen event of the Grid:

<style>
  .myGroupClass{
    background: #3bb;
    color: #fff;
    padding: 0 3px;
    line-height: 20px;
    font-size: 12px;
    border-radius: 5px;
  }
  </style>
    <div id="client"></div>
      <script>
        $(document).ready(function() {
          var telerikWebServiceBase = "https://demos.telerik.com/kendo-ui/service/";
          $("#client").kendoGrid({
            dataSource: {
              transport: {
                read:  {
                  url: telerikWebServiceBase + "/Products",
                  dataType: "jsonp"
                },
                update: {
                  url: telerikWebServiceBase + "/Products/Update",
                  dataType: "jsonp"
                },
                destroy: {
                  url: telerikWebServiceBase + "/Products/Destroy",
                  dataType: "jsonp"
                },
                create: {
                  url: telerikWebServiceBase + "/Products/Create",
                  dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                  if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                  }
                }
              },
              batch: true,
              pageSize: 20,
              schema: {
                model: {
                  id: "ProductID",
                  fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true } },
                    UnitPrice: { type: "number", validation: { required: true, min: 1} },
                    Discontinued: { type: "boolean" },
                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                  }
                }
              }
            },
            filterMenuOpen: function(e) {
              var fieldToSortBy = "Discontinued";
              if (e.field !== fieldToSortBy) {
                var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
                filterMultiCheck.container.empty();

                filterMultiCheck.checkSource.sort([{field: fieldToSortBy, dir: "asc"},{field: e.field, dir: "asc"}]); 
                filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
                filterMultiCheck.createCheckBoxes();

                var listItems = e.container.find("ul").children();
                var sortedItems = filterMultiCheck.checkSource.view().toJSON();
                var previousGroupValue = "";
                for(var i = 0; i < sortedItems.length; i++){
                   if(sortedItems[i][fieldToSortBy] !== previousGroupValue){
                     previousGroupValue = sortedItems[i][fieldToSortBy];
                     debugger;
                     $(listItems[i+1]).prepend("<li class='myGroupClass'>" + fieldToSortBy + ": " + previousGroupValue + "</li>");
                   }
                }
              }
            },
            filterable: true,
            pageable: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: [
              { field: "ProductName", filterable: { multi: true } },
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120, filterable: { multi: true } },
              { field: "UnitsInStock", title: "Units In Stock", width: 120, filterable: { multi: true } },
              { field: "Discontinued", width: 120, filterable: { multi: true, dataSource: [{ Discontinued: true }, { Discontinued: false }]} },
              { command: "destroy", title: "&nbsp;", width: 150}],
            editable: true
          });
        });
      </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy