New to Kendo UI for jQuery? Download free 30-day trial

Always visible select all checkbox

Environment

Product Progress Kendo UI Grid
Operating System All
Browser All

Description

The search all checkbox disappears when a filter is applied in the FilterMultiCheck menu.

Cause

Currently, there is no built-in way in which we can keep the 'Select All' checkbox. You will need to override some Kendo internal functions that will help keep the select all checkbox visible and its state updated accordingly. We have a logged Feature request for this behaviour to be built-in, so you can upvote it in our Feedback Portal

Solution

Override the checkAll function and the updateCheckAllState function before the grid is initialized.

    kendo.ui.FilterMultiCheck.fn.checkAll = function(){
            var state = this.checkBoxAll.is(":checked");
            this.container.find(":checkbox:visible").prop("checked", state);
    }

    kendo.ui.FilterMultiCheck.fn.updateCheckAllState =  function() {
        if (this.options.messages.selectedItemsFormat) {
            this.form.find(".k-filter-selected-items").text(kendo.format(this.options.messages.selectedItemsFormat, this.container.find(":checked:not(.k-check-all)").length));
        }

        if (this.checkBoxAll) {
            var state = this.container.find(":checkbox:not(.k-check-all):visible").length == this.container.find(":checked:not(.k-check-all):visible").length && this.container.find(":checkbox:not(.k-check-all):visible").length !==0;
            this.checkBoxAll.prop("checked", state);
        }
    }

And add the styles

     <style>
      .k-multicheck-wrap .k-item:first-child {
        display:inline-block !important;
      }
        .k-multicheck-wrap {
          overflow-x: hidden;
        }
    </style>
    <style>
      .k-multicheck-wrap .k-item:first-child {
        display:inline-block !important;
      }
    </style>
    <div id="example">
      <style>
        .k-multicheck-wrap {
          overflow-x: hidden;
        }
      </style>
      <div class="demo-section k-content wide">
        <h4>Client Operations</h4>
        <div id="client"></div>
      </div>
      <script>
        $(document).ready(function() {

          kendo.ui.FilterMultiCheck.fn.checkAll = function(){
            var state = this.checkBoxAll.is(":checked");
            this.container.find(":checkbox:visible").prop("checked", state);
          }

          kendo.ui.FilterMultiCheck.fn.updateCheckAllState =  function() {
            if (this.options.messages.selectedItemsFormat) {
              this.form.find(".k-filter-selected-items").text(kendo.format(this.options.messages.selectedItemsFormat, this.container.find(":checked:not(.k-check-all)").length));
            }
            if (this.checkBoxAll) {
              var state = this.container.find(":checkbox:not(.k-check-all):visible").length == this.container.find(":checked:not(.k-check-all):visible").length && this.container.find(":checkbox:not(.k-check-all):visible").length !==0;
              this.checkBoxAll.prop("checked", state);
            }
          }


          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 } }
                  }
                }
              }
            },
            filterable: true,
            pageable: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: [
              { field: "ProductName", filterable: { multi: true, search: true} },
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120, filterable: false },
              { field: "UnitsInStock", title: "Units In Stock", width: 120, filterable: false },
              { field: "Discontinued", width: 120, filterable: false},
              { command: "destroy", title: "&nbsp;", width: 150}],
            editable: true,
            filterMenuInit: function(e){
              var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");
              filterMultiCheck.searchTextBox.on('keydown', function(ev){
                setTimeout(function(){
                  filterMultiCheck.updateCheckAllState();
                },300);                
              });
            }
          });
        });
      </script>
    </div>
In this article
Not finding the help you need? Improve this article