Dropdown list size

9 posts, 0 answers
  1. matthieu
    matthieu avatar
    4 posts
    Member since:
    Nov 2016

    Posted 16 Nov 2016 Link to this post

    Hi,

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

    Thanks,

    Matthieu

  2. Patrick
    Admin
    Patrick avatar
    193 posts

    Posted 16 Nov 2016 Link to this post

    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.
  3. matthieu
    matthieu avatar
    4 posts
    Member since:
    Nov 2016

    Posted 16 Nov 2016 in reply to Patrick Link to this post

    Hi,

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

    Matthieu

  4. Patrick
    Admin
    Patrick avatar
    193 posts

    Posted 16 Nov 2016 Link to this post

    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.
  5. Patrick
    Admin
    Patrick avatar
    193 posts

    Posted 16 Nov 2016 Link to this post

    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.
  6. matthieu
    matthieu avatar
    4 posts
    Member since:
    Nov 2016

    Posted 17 Nov 2016 Link to this post

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

  7. Patrick
    Admin
    Patrick avatar
    193 posts

    Posted 17 Nov 2016 Link to this post

    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.
  8. matthieu
    matthieu avatar
    4 posts
    Member since:
    Nov 2016

    Posted 17 Nov 2016 in reply to Patrick Link to this post

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

  9. Patrick
    Admin
    Patrick avatar
    193 posts

    Posted 18 Nov 2016 Link to this post

    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.
Back to Top