Declarative Initialization list width kendo autocomplete

Question

Is there any way to decoratively define the List width in the HTML. I know I can do it

var autoComplete = $("#autoComplete").data("kendoAutoComplete");

// set width of the drop-down list
autoComplete.list.width(400);

but I want to do it in HTML only. I have already tried:

data-list-width="400"

Answer 1

I got the answer from telerik today:

Currently, the width of the popup element can be set only programatically.

Answer 2

When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.

You can define a CSS style for this newly created wrapper as:

#autocomplete-list {
    width: 300px !important;
}

You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.

Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/

Answer 3

Salam!

The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.

If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.

See this demo if you want to use custom binding.