Wider list items with AngularJS combobox

[Mike]

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.

 

[Boyan Dimitrov]

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