KendoUI Đặt chiều rộng của danh sách thả xuống

Question

Tôi đang tìm cách tốt nhất để đặt chiều rộng của danh sách thả xuống KendoUI - thông qua Trình trợ giúp HTML Kendo.

@(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;"}) 
) 

Tôi đang thiết lập chiều rộng của DropDownList, nhưng thông báo trong HTML được tạo ra, chiều rộng là 200 pixel được đặt trên một đầu vào văn bản ẩn, không phải là DropDownList:

<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"> 

.. Do đó DropDownList kết quả vẫn cuộn cả theo chiều ngang và chiều dọc, mà tôi không muốn.

Answer 1

@Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" }) trên máy chủ làm việc bên cho tôi và tài liệu trên http://docs.kendoui.com/. Có thể không quá lâu.

Answer 2

Với js, từ trang Kendo:

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

JsFiddle

Answer 3

Chỉ cần nghĩ rằng tôi muốn thêm vào điều này vì nó đã giúp tôi ...

Nếu bạn muốn áp dụng một cái gì đó mà kéo dài chiều rộng của Danh sách vượt quá chiều rộng của đầu vào, bạn có thể làm điều này bằng cách sử dụng Bộ chọn jQuery và một lớp css.

lưu ý: đây là cho ComboBox, nhưng nên làm việc tốt như nhau với DropDownList

Vì vậy, bạn thêm này

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

Sau đó thêm một đoạn Javascript mà thực hiện điều này:

$(document).ready(function() { 

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

}); 

Để tiến thêm một bước nữa, bạn thực sự có thể làm cho nó trở nên chung chung hơn bằng cách cho phép chiều rộng được chỉ định khi xác định menu thả xuống:

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

Sau đó javascript chung chung hơn của:

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

Answer 4

Ở đây bạn đi:

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

đơn giản và nó làm việc cho tôi sau khi trải qua một giờ!