How to hide hidden dropdownlist item?

[AJ]

I have a Kendo DropdownList as follows : 

    $("#txtTag").kendoDropDownList({
        dataTextField: "TagDesc",
        dataValueField: "TagId",
        optionLabel: " ",
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: "/Data/GetTag"
                }
            }
        },
        change: onChange,
        filter: "contains"
    });

I have hidden one of the values by using 

$("#txtTag_listbox li")[4].hidden = true;

However, when I do a filter/search on the dropdown List , the hidden item also appears in that list. How do I prevent it to not appear it in the list.

[Neli]

Hi AJ,

When filtering is performed in the DropDownList the dataBound and the filtering events are triggered. I would suggest you handle the dataBound event of the widget and hide the needed element there. 

However, note that if you are hiding the element by using an index, a different element will be hidden depending on the filtered result. Thus, in case in your scenario you need to hide an item with specific text, I would suggest you search for the element with the needed text and then hide it. Such an approach is demonstrated in the Dojo linked here. 

I hope this helps.

Neli
Progress Telerik

[AJ]

Hello Neli, 

Yes this approach works fine for me. Thank You!

[Samanth]

Hello Neli,

I followed te same approach but I am able to select the hidden items i.e. Chang in your dojo link with keyboard down arrow. Is there a fix for this issue?

[Neli]

Hi Samanth,

In the select event handler of the DropDownList, you can check if the currently selected item is hidden. Then in case the code of the current is 'ArrowDown' or 'ArrowUp' you can select the item with the next or the previous index. Below is an example:

select: function(e){
            var currentEvent = event;
           
            if(!$(e.item).is(':visible') && currentEvent.code == 'ArrowDown'){
                var indexDown = $(e.item).index() +1;
                e.sender.select(indexDown)
            }else if(!$(e.item).is(':visible') && currentEvent.code == 'ArrowUp'){
                var indexUp = $(e.item).index() -1;
                e.sender.select(indexUp)
            }
},

Here is the modified Dojo example. 

 

Regards,

Neli

[Samanth]

Thank you Neli for the Code. It is working if we have only one hidden item if we have multiple hidden items continuously its not working .

[Georgi Denchev]

Hi, Samanth,

I've tweaked the Dojo provided by my colleague Neli to accommodate multiple hidden items.

Give the updated logic a try and let me know how it goes.

https://dojo.telerik.com/@gdenchev/ILoLULEF 

Best Regards,

Georgi

[Samanth]

Hi Georgi,

Thanks for the solution , I see one issue in this code if the last item is hidden and its going on infinite recursive loop and showing the last item selected which is hidden.

[Georgi Denchev]

Hi, Samanth,

You could add one more conditional check to determine if there are any additional items when the next() or prev() method is called.

      function getNextVisibleItem(currentItem) {
        let nextItem = currentItem.next();
        if (nextItem.is(":visible")) {
          return nextItem;
        } else if(!nextItem.length) {
          return currentItem.prev();
        }

        return getNextVisibleItem(nextItem);
      }

      function getPrevVisibleItem(currentItem) {
        let prevItem = currentItem.prev();
        if (prevItem.is(":visible")) {
          return prevItem;
        } else if(!prevItem.length) {
          return currentItem.next();
        }

        return getPrevVisibleItem(prevItem);
      }

Dojo

https://dojo.telerik.com/@gdenchev/AGEYIZAx 

[Samanth]

Hi Georgi,

This solution worked partially. But if i focus on the drop down with keyboard i am unable to select the values with down arrow.

Also if i focus on this dropdown and if i use right arrow and again i am able to select the hidden values. Is there any other way can we handle this permanently?

[Georgi Denchev]

Hello, Samanth,

The code samples provided by me and my colleague Neli are meant to serve as examples. However, covering all cases is up to the developer.

If you require additional assistance with the development process, you can contact our Professional Services team that can create customized solutions based on the exact requirement.

Best Regards,

Georgi

[Samanth]

Hi Georgi,

 

Thank you so much for the solutions,

But this is not the right behavior for a dropdown. The problem is with kendo dropdown control itself. if you focus on the dropdown and use the arrow key the hidden items are selectable thats the main problem to fix this we are tweaking the code and in some scenarios its working some scenarios its not working.Request you to please cover at the control formation level itself the way how mouse click is working same thing should happen with keyboard arrow keys as well.

[Georgi Denchev]

Hi, Samanth,

The DropDownList doesn't have any built-in configurations/options for hiding items. The approach that me and my colleague shared is a custom one. If the hiding of items was a built-in functionality, I would've been in a complete agreement with you that this is indeed a bug.

In the current state, if an item must not be present in the DropDownList, it is best for it to be excluded from the data altogether, instead of relying on hiding the element with styles. This way you minimize the chance of stumbling across such odd behaviors.