Help: Grid- 'Filter search' Keep 'Select All'

[Tom]

Hello!

I have a Kendo Grid on my page and I have a few columns that are 'filterable' and 'multiselect' checkbox lists.

 

The top select option is "Select All" which selects all options, however this "Select All" option goes away once you search for anything.

 

What I need:

I need the "Select All" checkbox to remain after searching

I need the "Select All" checkbox to only select items that are shown. IE: I search for "W" and click 'select all' and only those items with "W" get selected.

 

 

Thanks!

[Dimiter Topalov]

Hello Tom,

The described behavior is by design, because there is no straightforward way to maintain the desired functionality. For example, if after some filtering, there are 5 items remaining in the list, and "Select All" is checked, there will be 5 selected items, and the Select All box will be checked. But if in this moment the user deletes the filter, visually he will get the "Select all" box checked, the 5 items still selected, but all other items will not be selected.

You can check out the more detailed answer in the support thread for the same request.

Regards,
Dimiter Topalov
Telerik by Progress

[Twisha]

Is there a solution available? We have a request from the client to have the "Select All" option available when the search text is entered. The client is looking for an excel-like filtering capability. I have provided a screenshot from excel. Technically there is no use of "Select All" when search is not provided. Rather when user narrows their filter set by entering search text, they want the grid to filter the column for those search results.

Looking forward to your direction.

[Preslav]

Hi Twisha,

I am pasting the Dojo: http://dojo.telerik.com/Utobo from your ticket on the same topic if anyone from the community encounters the same.

In the above Dojo, you can observe the mentioned issues, arising from the desired functionality.


Regards,
Preslav
Progress Telerik

[Alex Hajigeorgieva]

Hi, all,

Just a quick note to let you know that I have opened a Feature request that the Select All option should be always visible and voted on your behalf.

https://feedback.telerik.com/kendo-jquery-ui/1498839-keep-the-select-all-option-when-filtering

Meanwhile, you can achieve the desired behaviour by overriding kendo internal functions:

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 styles:

 <style>
      .k-multicheck-wrap .k-item:first-child {
        display:inline-block !important;
      }
        .k-multicheck-wrap {
          overflow-x: hidden;
        }
      </style>

Here is a runnable example:

https://dojo.telerik.com/@bubblemaster/adEHOPaD

Regards,
Alex Hajigeorgieva
Progress Telerik

[Sarthak]

Getting the following error:

Property 'FilterMultiCheck' does not exist on type 'typeof ui'

If by any chance I cant install kendo-ui-angular to import the FilterMultiCheck, is there any workaround for this?

[Georgi Denchev]

Hi, Sarthak,

The above example does not require Kendo UI for Angular. If you're looking for a similar example in the Angular library then I would advise opening a separate forum thread or private ticket for the Angular product as my colleague will be better at assisting you.

Here's an article that might be useful:

https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/ 

It showcases how you can integrate Kendo UI for jQuery in Kendo UI for Angular.

Best Regards,

Georgi