Dropdown list size

[matthieu]

Hi,

Is it possible to create a drop down list always open (like html element select with attribute size) ?

Thanks,

Matthieu

[Patrick | Technical Support Engineer, Senior]

Hi Matthieu,

It is possible!  One way is to use the open method.  Then, on the close event, use e.preventDefault() to keep it from closing.

You can also set the height of your popup using height.

Here is a Kendo UI Dojo by Progress which illustrates the approach.  In this Dojo, it's using no animation and will show the dropdownlist when it opens.

$(document).ready(function() {
          $("#products").kendoDropDownList({
            ...
            animation: false,
            height: 80,
            open: function(e) {
              this.wrapper.show();
            },
            close: function(e){
              e.preventDefault();
            }
          });

          var dropdownlist = $("#products").data("kendoDropDownList");
          dropdownlist.wrapper.hide();
          dropdownlist.open();
        });

For more information pertaining to the Kendo DropDownList, check out our helpful demos, documentation, and API Reference.

I hope this helps!  

Regards,
Patrick
Telerik by Progress

[matthieu]

Hi,

Thanks for you answer. Is it possible to have "open" function with angular drop down list directive ?

Matthieu

[Patrick | Technical Support Engineer, Senior]

Hi Matthieu,

Here is the same example in AngularJS.  In the KendoWidgetCreated event, you can see I call the open() method.  

$scope.$on("kendoWidgetCreated", function(event, widget) {
    if(widget === $scope.dropDownList) {
       widget.wrapper.hide();
       widget.open();
  }
});

Hope this helps!

Regards,
Patrick
Telerik by Progress

[Patrick | Technical Support Engineer, Senior]

Hi Matthieu,

As a followup, if you would like to find more information on the dropdownlist and AngularJS, check out this demo and this documentation.

Again, hope this all helps!

Regards,
Patrick
Telerik by Progress

[matthieu]

Thanks, but there is no consideration for k-ng-disabled and k-ng-readonly on the drop down list...

[Patrick | Technical Support Engineer, Senior]

Hello Matthieu,

If you would like to use k-ng-disabled or k-ng-readonly, it can be done.  You can learn more about its implementation in this article.

Regards,
Patrick
Telerik by Progress

[matthieu]

http://dojo.telerik.com/eCOZU/2

I have 3 select : 2 last use readonly or disabled well.

The 1st has both property, but you can pick another value in the ".k-list-container" element...

[Patrick | Technical Support Engineer, Senior]

Hi Matthieu,

The k-ng-disabled and k-ng-readonly are used in the main element and not the list.  

The list can be unselectable by using the Select event and using e.preventDefault().  

$scope.onSelect = function(e) {
  e.preventDefault();
}

To get the appearance to look disabled, add the k-state-disabled to the list.

var list = widget.list;

if(widget === $scope.dropDownList2){
  list.addClass("k-state-disabled");
}

I also hid the vertical scrollbar with CSS to disable the scrolling.

<style>
   .k-list-scroller {
    overflow-y: hidden;
  }
</style>

Here is an updated version of the Kendo Dojo.

Hope this helps!

Regards,
Patrick
Telerik by Progress