This is a migrated thread and some comments may be shown as answers.

Dropdown list size

8 Answers 81 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
matthieu
Top achievements
Rank 1
matthieu asked on 16 Nov 2016, 03:35 PM

Hi,

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

Thanks,

Matthieu

8 Answers, 1 is accepted

Sort by
0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 16 Nov 2016, 06:12 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
matthieu
Top achievements
Rank 1
answered on 16 Nov 2016, 07:22 PM

Hi,

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

Matthieu

0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 16 Nov 2016, 08:37 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 16 Nov 2016, 08:41 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
matthieu
Top achievements
Rank 1
answered on 17 Nov 2016, 02:47 PM

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

0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 17 Nov 2016, 03:16 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
matthieu
Top achievements
Rank 1
answered on 17 Nov 2016, 03:58 PM

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...

0
Patrick | Senior Technical Support Engineer
Telerik team
answered on 18 Nov 2016, 05:10 PM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Tags
DropDownList
Asked by
matthieu
Top achievements
Rank 1
Answers by
Patrick | Senior Technical Support Engineer
Telerik team
matthieu
Top achievements
Rank 1
Share this question
or