Wider list items with AngularJS combobox

2 posts, 0 answers
  1. Mike
    Mike avatar
    1 posts
    Member since:
    Apr 2015

    Posted 27 Apr 2015 Link to this post

    I'm using the combobox in an AngularJS application.
    The list items use a custom template that show multiple columns of data. 

    e.g.
    [selected value] [v]
    [option list column 1  | col2    | col 3   | col4 ]
    [option list column 1  | col2    | col 3   | col4 ]
    [option list column 1  | col2    | col 3   | col4 ]
    [option list column 1  | col2    | col 3   | col4 ]
    [option list column 1  | col2    | col 3   | col4 ]

    The trouble is that the options list is set to the width of the input field, but the options are much wider than that field.
    I need the width of the options list to be wide enough to show all the columns in the options template without scrolling.

    The documentation shows how you can make the list items for a combobox wider than the input box using jQuery.

    <input id="comboBox" />
    <script>
        var combobox = $("#combobox").data("kendoComboBox");
        // set width of the drop-down list
        combobox.list.width(400);
    </script>

    How can you do this in an Angular application?

    My Angular template looks like this:
    <select id="property"
      kendo-combo-box                         
      k-options="propertyOptions">
    </select>

    With controller code that looks like this:

                $scope.propertiesDataSource = new kendo.data.DataSource({
                    data: property_list
                });    
      
                $scope.propertyOptions = {
                dataSource: $scope.propertiesDataSource,
                dataTextField: "PropertyName",
                dataValueField: "PropertyID",
                // using {{angular}} templates:
                valueTemplate: '<span>[{{dataItem.UtilityAccountID}}] {{dataItem.PropertyName}}</span>',    
                template: '<span class="k-state-default" style="width:800px"><div class="combobox-item" style="float:left;white-space:nowrap;width:45px;">{{dataItem.UtilityAccountID}}</div><div class="combobox-item" style="float:left;white-space:nowrap;width:85px;">{{dataItem.PropertyName}}</div><div  class="combobox-item" style="float:left;white-space:nowrap;width:155px;">{{dataItem.City}}</div></span>'            
            };  

     

    Furthermore,

    Can it handle edge cases like a drop list on the right side of your page positioning to the right side of the input control instead of the left side?
    If the positioning was set from the left then the list would overflow the right side of the screen.

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Apr 2015 Link to this post

    Hello Mike,

    I am afraid that there is no angular solution for increasing the list items container width. The same jQuery solution should be used. You can do that in the kendoWidgetCreated event and execute the logic. 

    As for your second question - the container element will not adjusts its position automatically in order to avoid overflowing. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top