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

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

4 Answers 250 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/.

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