Always visible select all checkbox

Environment

Product	Progress® Kendo UI® Grid for jQuery
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>