remove item from dropdownlist when source is an array with basic type

[Dan]

I have a dropdownlist with some years. The data source I am using directly an array of numbers eq: [2020, 2021]. I need to remove the 2020. When I am trying to call the method dropdownlist.dataSource.remove(dropdownlist.dataItem()) nothing happens

 

[Neli]

Hello Dan,

I am not sure about the exact scenario, however, there are different ways to remove or hide an element from the DropDownList. For example:

- You could remove the element from the array and then assign the modified array as DropDownList data

var data = [2020, 2021, 2022];    
data.splice(0, 1);

$("#dropdownlist").kendoDropDownList({
        dataSource: data,
        value: 2021
});

- You could set the needed dataSource using the setDataSource method. 

- You could hide the needed element when the DropDownList gets opened:

open: function(){
        setTimeout(function(){
              var ddl3 = $("#dropdownlist3").data('kendoDropDownList')
              $(ddl3.popup.element).find('li:eq(0)').hide()
       })
 }

Here is a Dojo example where all three approaches are demonstrated. 

I hope you will find the provided suggestions helpful for resolving the issue.

Regards,
Neli
Progress Telerik

[Dan]

Hi Neli,

Since I presented the code dropdownlist.dataSource.remove(dropdownlist.dataItem()) then that means that I need to remove the selected item. So only using the method setDataSource() this can be achieved. Do I need to be aware of something? 

Does the two ways(manual and the api method) will accomplish the same thing from the point of performance and the events raised to the dropdownlist? (I mean if I use setDataSource(new_data) vs dataSource.remove(dropdownlist.dataItem())) 

 

 

[Neli]

Hi Dan,

Using the remove method could be a better option as using setDataSource will refresh the entire DOM of the component. Just for your information below, you will find the links to the respective code for setDataSource and remove methods:

- https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.list.js#L1152

- https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.list.js#L2690-L2701

I hope this helps. 

Regards,

Neli