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

Wider list items with AngularJS combobox

1 Answer 50 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 27 Apr 2015, 08:55 PM

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.

 

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 29 Apr 2015, 04:05 PM

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!
 
Tags
ComboBox
Asked by
Mike
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or