Làm thế nào để tắt tùy chọn danh sách thả xuống kendoiu?
tôi không thể tìm thấy làm thế nào để thực hiện điều này trong tài liệu của họ ...Vô hiệu hóa tùy chọn danh sách thả xuống KendoUI
Trả lời
Hãy thử phương pháp sau (here và here có một số demo): sử dụng một template cho các hạng mục của bạn, mà có điều kiện bổ sung thêm một cla ss cho các mục bị vô hiệu hóa. Thông tin về các mục nào sẽ bị vô hiệu hóa đến từ các đối tượng dữ liệu nằm bên dưới.
HTML:
<script id="template" type="text/x-kendo-tmpl">
#
if (data.disabled != null) {#
<span class="tbd" > ${data.text} - is disabled </span>
# } else { #
<span>${data.text}</span > #
}#
</script>
<input id="color" value="1" />
jQuery và Kendo UI (lưu ý ở đây disabled
sở hữu thêm cho Orange mục và việc sử dụng các dataBound event):
var data = [{
text: "Black",
value: "1"
}, {
text: "Orange",
value: "2",
disabled: "disabled"
}, {
text: "Grey",
value: "3"
}];
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
template: kendo.template($("#template").html()),
dataBound: function (e) {
$(".tbd").parent().click(false);
}
});
CSS cho già ra:
.tbd{
color:#777777
}
Dựa trên câu hỏi here, bạn có thể truy cập vào các mục có liên quan và thay đổi các thuộc tính như vậy:
var ds = $('#YourCombo').data().kendoComboBox.dataSource;
//someIndex is the index of the item in the dataSource
ds.data()[someIndex].set("enabled","False");
Tôi ca xem cách hoạt động của văn bản, nhưng không chắc chắn rằng nó sẽ hoạt động để vô hiệu hóa tùy chọn .. nên có một số ràng buộc bổ sung trên danh sách thả xuống không? – CoffeeCode
Hãy thử như
này$('#YourDropDown').attr('disabled', 'disabled');
Việc này sẽ vô hiệu hóa danh sách thả xuống, không phải tùy chọn. –
Kendo hiện không hỗ trợ chức năng như vậy nhưng đây là hack dễ nhất mà tôi tìm thấy để vô hiệu hóa một tùy chọn trong Kendo Dropdown.
$("#" + id + "_listbox .k-item")[index].disabled = true;
nơi id -> ID của bạn thả xuống
index -> vị trí của các phần tử trong danh sách thả xuống mà bạn muốn vô hiệu hóa.
Hy vọng điều đó sẽ hữu ích. Thưởng thức :)
Bạn sẽ chuyển sang màu xám mục đó như thế nào? – Shardul
điều này thật điên rồ ... tôi yêu nó .. giải pháp nhanh chóng và hoàn hảo –
@Shardul: Bạn có thể thử điều này, nó hoạt động $ ("# ID.k-item") [0] .style.cssText = " color: lightgrey " –
Bạn có thể thử một cái gì đó như thế này:
var dropDown = $("#yourDropdown").data("kendoDropDownList");
dropDown.enable(false);
Điều đó sẽ tắt toàn bộ menu thả xuống, không phải là một tùy chọn duy nhất ... – Sebazzz
Nếu bạn muốn vô hiệu hóa toàn bộ quyền kiểm soát và bạn đang sử dụng các API thông thạo MVC, sau đó bạn có thể sử dụng .HtmlAttributes() phương pháp:
@Html.Kendo()
.DropDownList()
.HtmlAttributes(new { @disabled = "disabled" })
Trong khi câu trả lời được chấp nhận sẽ ngăn nhấp chuột vào mục, nó vẫn cho phép điều hướng bằng bàn phím (và cảm thấy khá đáng sợ).
Sử dụng DataItems để xác định mục nào sẽ bị vô hiệu hóa thực sự là cách để đi, nhưng thay vì xóa trình xử lý nhấp chuột, việc thực hiện trình xử lý Select
sẽ đơn giản hơn sẽ dừng chuỗi. Phương pháp này là supported and documented bởi Kendo:
Bị sa thải khi một mục từ popup được chọn bởi người sử dụng hoặc với chuột/máy hoặc với bàn phím điều hướng.
...
e.preventDefault Chức năng
Nếu gọi ngăn chặn các hành động lựa chọn.Tiện ích con sẽ giữ lại mục được chọn trước đó là .
Tất cả những gì còn lại là để phát hiện nếu chúng ta muốn hủy bỏ việc lựa chọn hay không, mà là tầm thường nếu mục dữ liệu của bạn giữ một tài sản để xác định liệu nó có sẵn hay không:
function Select(e) {
if (e.sender.dataItem(e.item).disabled) {
e.preventDefault();
}
}
Sử dụng một mẫu để tiêm một lớp cụ thể là không cần thiết, nhưng tôi vẫn muốn giới thiệu nó nếu chỉ để kích hoạt một kiểu dáng thích hợp.
Đó là những gì tôi đang tìm kiếm !!! cảm ơn người đàn ông! – CoffeeCode
Giải pháp tuyệt vời @Alex – Nick
Điều này làm việc nhưng tôi đang cố gắng tìm một cách tiếp cận năng động và nó dường như không thể cho đến nay – Nick