This is a migrated thread and some comments may be shown as answers.

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

4 Answers 1020 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 02 Nov 2016, 09:34 PM

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!

4 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 04 Nov 2016, 08:25 AM
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
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
0
Twisha
Top achievements
Rank 1
answered on 29 Jan 2018, 06:28 PM

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.

0
Preslav
Telerik team
answered on 30 Jan 2018, 01:03 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex Hajigeorgieva
Telerik team
answered on 16 Dec 2020, 10:29 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Sarthak
Top achievements
Rank 1
commented on 07 Jul 2023, 01:35 PM

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
Telerik team
commented on 11 Jul 2023, 09:05 AM

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

Tags
Grid
Asked by
Tom
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Twisha
Top achievements
Rank 1
Preslav
Telerik team
Alex Hajigeorgieva
Telerik team
Share this question
or