New to Kendo UI for jQueryStart a free 30-day trial

Sort Multiple Checkbox Filter

Environment

ProductProgress® Kendo UI® Grid for jQuery
Operating SystemAll
BrowserAll
Browser VersionAll

Description

How can I sort the multiple checkbox filter while using the Kendo UI Grid for jQuery?

Solution

The following example demonstrates how to sort the Kendo UI multiple checkbox filter while using the Grid.


	<div id="client"></div>
      <script>
        $(document).ready(function() {
          var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core/";
          $("#client").kendoGrid({
            dataSource: {
              transport: {
                read:  {
                    url: crudServiceBaseUrl + "/Products"
                },
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    type: "POST",
                contentType: "application/json"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    type: "POST",
                contentType: "application/json"
                },
                create: {
                    url: crudServiceBaseUrl + "/Products/Create",
                    type: "POST",
                contentType: "application/json"
                },
                parameterMap: function(options, operation) {
                  if (operation !== "read" && options.models) {
                    return 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 } }
                  }
                }
              }
            },
            filterMenuInit: function(e) {
              if (e.field === "UnitPrice" || 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"});

                // uncomment the following line to handle any grouping from the original dataSource:
	        // filterMultiCheck.checkSource.group(null);

                filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
                filterMultiCheck.createCheckBoxes();
              }
            },
            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>

See Also