Hi Roger, - - To achieve the desired appearance I would suggest you to add a click event handler to the arrow button. When the arrow is clicked and the popup for filtering appears, you could find all the checkboxes through the '.k-checkbox' class. Then for each checkbox, if it is checked, you could hide the respective item. Note, that you will need to exclude the checkbox corresponding to the 'All' node (marked in orange below). In order to ensure, that the checkboxes are rendered by the time you are trying to check their values, you will need to use setTimeout function. - - - $('.k-icon.k-i-arrow-60-down').click(function(){ - - setTimeout(function(){ - var checkboxes = $('.k-checkbox'); - for(var p=0; p - var checked = checkboxes[p].checked; - if(!checked){ - $(checkboxes[p]).closest('.k-item').not('.k-first').hide() - } - } - }, 0) - }) - - - Here you will find a Dojo example, where the approach described above is implemented. - I hope this helps. - - Regards, - Neli - 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. -

Telerik Forums / Kendo UI for jQuery Forum / Spreadsheet /

hide Filtered values

Kendo UI
Resources Buy Try

3 posts, 1 answers

Roger

2 posts

Member since:
Dec 2012

Posted 18 Jun 2018 Link to this post

is it possible hide unselected items in filter popup dialogue of each column of spreadsheet control?
Basically, we need this works like Excel.

Please check link out to see what I need:
https://www.screencast.com/t/doeRvn0ayl8a
Answer
Neli
Admin

291 posts

Posted 20 Jun 2018 Link to this post

Hi Roger,

To achieve the desired appearance I would suggest you to add a click event handler to the arrow button. When the arrow is clicked and the popup for filtering appears, you could find all the checkboxes through the '.k-checkbox' class. Then for each checkbox, if it is checked, you could hide the respective item. Note, that you will need to exclude the checkbox corresponding to the 'All' node (marked in orange below). In order to ensure, that the checkboxes are rendered by the time you are trying to check their values, you will need to use setTimeout function.

$('.k-icon.k-i-arrow-60-down').click(function(){



    setTimeout(function(){

        var checkboxes = $('.k-checkbox');

        for(var p=0; p < checkboxes.length; p++){

            var checked = checkboxes[p].checked;

            if(!checked){

                $(checkboxes[p]).closest('.k-item').not('.k-first').hide()

            }

        }

    }, 0)

})

Here you will find a Dojo example, where the approach described above is implemented.
I hope this helps.

Regards,
Neli
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.
Roger

2 posts

Member since:
Dec 2012

Posted 21 Jun 2018 in reply to Neli Link to this post

that why I prefer Kendo controls. Tested & it works like a charm.

Thank you so much.