Geek asks and answers

KendoUI Set Dropdown Width

I'm looking for a better way to set the width of the KendoUI drop-down list - using the Kendo HTML Helper.

@(Html.Kendo().DropDownList()
    .Name("ddlAccount")
    .DataTextField("Name")
    .DataValueField("Id")
    //This doesn't work, it styles the hidden input instead of the ddl
    .HtmlAttributes(new {style="width:200px;"})
)

I set the width of the DropDownList, but notice in the generated HTML, the width of 200 pixels is set to hidden text input, and not to the drop-down list:

<span aria-busy="false" aria-readonly="false" aria-disabled="false" aria-owns="ddlAccount_listbox" tabindex="0" aria-expanded="false" aria-haspopup="true" role="listbox" class="k-widget k-dropdown k-header styled_select" style="" unselectable="on" aria-activedescendant="ddlAccount_option_selected">

<span class="k-dropdown-wrap k-state-default">
    <span class="k-input">Choice One</span>
    <span class="k-select">
        <span class="k-icon k-i-arrow-s">select</span>
    </span>
</span>
<input id="ddlAccount" name="ddlAccount" style="width: 200px; display: none;" type="text" data-role="dropdownlist">

... Thus, the resulting DropDownList still scrolls both horizontally and vertically, which I don't want.

+5
source share
4 answers

@Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" })server side works for me and is documented at http://docs.kendoui.com/ . Maybe not so long.

+11
source

From js, from the Kendo website:

// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);

Jsfiddle

+2
source

, , ...

, , jQuery css.

: comboBox, DropdownList

,

   @(Html.Kendo().ComboBoxFor(m => m.UserId)
      ...
      .HtmlAttributes(new { @class = "wideList" })
   )

Then add a Javascript snippet that does this:

$(document).ready(function () {

 $("input[data-role=\"combobox\"].wideList").each(function () {
    var combo = $(this).data("kendoComboBox");
    combo.list.width(400);
 });

});

To take another step, you could make it more general by specifying the width when defining the drop-down list:

@(Html.Kendo().ComboBoxFor(m => m.UserId)
   ...
   .HtmlAttributes(new { @class = "wideList", listWidth = "400" })
)

Then more general javascript:

$(document).ready(function () {
  $("input[data-role=\"combobox\"].wideList").each(function () {
    var combo = $(this).data("kendoComboBox");
    var width = $(this).attr('listWidth');
    combo.list.width(width);
  });
});
+1
source

Here you go:

$("#Dropdopwnlist").kendoDropDownList().parent().css("width", "200%");

Simple and it works for me after spending an hour!

0
source

More articles:


All Articles