How to set combobox dropdown width with angular?

5 posts, 1 answers
  1. Boris
    Boris avatar
    7 posts
    Member since:
    Feb 2015

    Posted 25 May Link to this post

    I need to specify the width of the dropdown. Is there a way to do this in angular?
  2. Patrick
    Admin
    Patrick avatar
    171 posts

    Posted 26 May Link to this post

    Hi Boris,

    Currently, there is no angular solution for setting the width of the ComboBox Dropdown list.  However, you can set it during the kendoWidgetCreated event using jQuery.  You can see the implementation in this Kendo UI Dojo by Progress.

    Here is the function:
    $scope.$on("kendoWidgetCreated", function(event, widget) {
            if (widget === $scope.localCombo){
              widget.list.width(400);
            }
            if (widget === $scope.remoteCombo){
              widget.list.width(200);
            }
          });

    Also, please check out our Kendo Feedback Portal to request new features.

    Hope this helps!

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET AJAX banner
  4. Boris
    Boris avatar
    7 posts
    Member since:
    Feb 2015

    Posted 15 Jun in reply to Patrick Link to this post

    Unfortunately this did not work.
  5. Boris
    Boris avatar
    7 posts
    Member since:
    Feb 2015

    Posted 15 Jun in reply to Patrick Link to this post

    The reason I think it's not working for me is because my comboboxes are inside an ng-repeat.

    Is there a solution in this case?

  6. Answer
    Patrick
    Admin
    Patrick avatar
    171 posts

    Posted 15 Jun Link to this post

    Hello Boris,

    Here are a couple approaches you can use to set your Kendo ComboBoxes list widths.

    1.  Using widget.ns:

    On the kendoWidgetCreated event, I checked the widget to see if it was a comboBox:
    $scope.$on("kendoWidgetCreated", function(event, widget) {
      if (widget.ns === ".kendoComboBox"){
        widget.list.width(200);
      }
    });

    2. Using the object from ng-repeat:

    On the kendoWidgetCreated event, I checked the item name from myObj used by ng-repeat:
    <div ng-repeat="item in myObj">
     ...
    </div>
    <script>
    ...
    $scope.myObj = [
       {"name":"a"}, {"name":"b"}, {"name": "c"}
    ];

    $scope.$on("kendoWidgetCreated", function(event, widget) {    
        if (widget.$angular_scope.item.name === "a"){
          widget.list.width(200);
        }
        if (widget.$angular_scope.item.name === "b"){
          widget.list.width(400);
        }
        if (widget.$angular_scope.item.name === "c"){
          widget.list.width(600);
        }
    });
    ...
    </script>       

    Hope this helps! 

    Regards,
    Patrick
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
UI for ASP.NET AJAX banner