I want to resize dropdown after set its dataSource

[FranckSix]

Hi,

I build a Kendo Dojo to demonstrate my point :

Dojo

I want to adjust the size of my DropDownList after each setDataSource command.

The current behavior adjust the height on first setDataSource only. I place two buttons to expose my point. If i click Small and Large after, the dropdown is very small and I need to scroll. Otherwise if I click the large button and small after, the dropdown is very large and show empty spaces after items.

I try resise, and refresh but it not working.

How can I adjust the size manually ? Thanks!

[FranckSix]

It's seems that the popup container set it's size at first opened and never change after

[Neli]

Hi Francis,

I would suggest handling the open event of the component. In the event handler, you can check the count of the items in the dataSource and based on that you can change the styles of the popup.

 open: function(){
        
        setTimeout(function(){
            var items = dropdownlist.dataSource.data().length * 28
            $(".k-list-content, .k-list, .k-popup").height(items);  
          })
      }

Here you will find the modified Dojo example.

I hope this helps.

Regards,
Neli
Progress Telerik

[FranckSix]

Cool nice workaround, apart from a slight flicker when opening, it works!

Thank you

[FranckSix]

Hi @Neli,

Another little thing, If I have many DropDownList on same page the solution adapt all dropdown to same Height.
I try to pass sender over the open method but I cant reach the popup element. It seem to be on a div not under the sender.
There is a way to retreive the right popup to apply your solution ?

This is my latests attempt, I keep trying :

    $("#dropdownlist").kendoDropDownList({
      autoWidth: true,
      dataTextField: "text",
      dataValueField: "value",
      open: function(e){
        setTimeout(function(){
            var items = e.sender.dataSource.data().length * 28;
          	$("#" + e.sender.element.attr("id") + "-list").closest(".k-list-content, .k-list, .k-popup").height(items);
          })
      }
    }); 

Thanks!

[FranckSix]

I found a workaround not the easy way... but it work!

    $("#dropdownlist").kendoDropDownList({
      autoWidth: true,
      dataTextField: "text",
      dataValueField: "value",
      open: function(e){
        setTimeout(function(){
          var liste = $("#" + e.sender.element.attr("id") + "-list");
          var content = liste.find(".k-list-content");
          var popup = liste.closest(".k-popup");
          
          var items = e.sender.dataSource.data().length * 28;
          liste.height(items);
          content.height(items);
          popup.height(items);
        })
      }
    });  

[Neli]

Hi Francis,

I am glad to hear that you have managed to find a workaround for the issue and thank you very much for sharing with the community. I am sure it will be helpful to the other users that have the same scenario.

Regards,

Neli