Vô hiệu hóa tùy chọn danh sách thả xuống KendoUI

Question

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ọ ...

Answer 1

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 
} 

Answer 2

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

Answer 3

Hãy thử như

này

$('#YourDropDown').attr('disabled', 'disabled'); 

Answer 4

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 :)

Answer 5

Bạn có thể thử một cái gì đó như thế này:

var dropDown = $("#yourDropdown").data("kendoDropDownList"); 
dropDown.enable(false); 

Answer 6

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

Answer 7

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.