Chiều rộng thả xuống Kendo

Question

Xin chào ai đó có thể cho tôi biết cách đặt chiều rộng cho menu thả xuống kendo? Đây là mẫu mã của tôi và nó không hoạt động. Có gì sai trong đó không?

$("#div1").kendoDropDownList({ 
    dataSource: items, 
    dataTextField: "Name", 
    dataValueField: "Id", 
    Width : "250px" 
}); 

Answer 1

kendoDropDownList không có chiều rộng thuộc tính cho cấu hình của nó. Xem tại đây: Kendo Docs

Những gì bạn có thể làm, là tạo kiểu cho đúng lớp. Vì bạn hy vọng không biết vị trí thả xuống của bạn nằm ở đâu, bạn có thể chỉ định bộ chọn để nó không áp dụng cho tất cả các trình đơn thả xuống.

#myContainer .k-dropdown { 
    width: 250px; 
} 

Answer 2

Trong trường hợp bạn phải cung cấp độ rộng khác nhau cho các điều khiển khác nhau, bạn có thể thực hiện theo cách tiếp cận dưới đây để tăng độ rộng cho điều khiển cụ thể.

$("#div1").width(250).kendoDropDownList({ 
    dataSource: items, 
    dataTextField: "Name", 
    dataValueField: "Id", 
}) 

Answer 3

Để giữ độ rộng tự động thiết lập bởi các trình duyệt:

$("select").each(function() { 
    $(this) 
     .width($(this).width()) 
     .kendoDropDownList(); 
}); 

Answer 4

Nếu MVC Razor DropDownList HTML cú pháp helper/wrapper được áp dụng, sau đó bạn có thể sử dụng phương pháp HtmlAttributes để xác định độ rộng của danh sách thả xuống như :

@(Html.Kendo().DropDownList()               .Name("myDDL") 
.HtmlAttributes(new { style="width:100px" }) 

Answer 5

Bạn cũng có thể thử điều này;

<script type="text/javascript"> 
    $(document).ready(function() { 
    var kendoDropDown = $('#div1').data('kendoDropDownList'); 
    kendoDropDown.list.width(250); 
    }); 
</script> 

Tài liệu khác có thể được tìm thấy here trong tham chiếu API chính thức của Telerik.

Answer 6

Tốt hơn để làm điều đó với CSS

#div1 {  
    width: 250px; 
} 

Nhưng sẽ làm việc với mã

$("#div1").width(250).kendoDropDownList({ 
    dataSource: items, 
    dataTextField: "Name", 
    dataValueField: "Id", 
}) 

Answer 7

này sẽ làm việc 100% vì nó đã làm việc cho tôi, tôi đã cố gắng giải pháp trên, nó không làm việc cho tôi vì vậy tôi tự mình tìm thấy điều này :), tôi hy vọng tất cả các bạn sẽ được hưởng lợi từ điều này

#DivThatContainsTheDropdown .k-combobox{ 
width: 22em !important; 
}