Question

可以更改已在剑道下拉列表中禁用的项目的颜色。我想自定义该项目的颜色，以便让用户知道该项目已被禁用。这是我的代码：

function DisableUserOfficeItem() {
    var officedropdowndata = officedropdown.dataSource.data();
    for (var i = 0; i < officedropdowndata.length; i++) {
        var active = officedropdowndata[i].OfficeActive;
        if (active === false) {
            $("#usrconfigoffice" + "_listbox .k-item")[i].disabled = true;
            $("#usrconfigoffice" + "_listbox .k-input")[i].css('color', '#c7c7cd'); 
        }
    }
}

请帮帮我。谢谢你的帮助。

Answer 1

您可以使用Kendo template自定义下拉选项。请参阅此Kendo下拉列表自定义Example

见JSFiddle

 $(document).ready(function() {
   $("#products").kendoDropDownList({
     dataTextField: "ProductName",
     dataValueField: "ProductID",
     template: $("#template").html(),
     dataSource: {
       transport: {
         read: {
           dataType: "jsonp",
           url: "//demos.telerik.com/kendo-ui/service/Products",
         }
       }
     },
     dataBound: function(e) {
       $(".DiscontinuedDisable").parent().click(false);
     }
   });
 });

.DiscontinuedDisable {
  color: #777777
}

<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>

<input id="products" style="width: 100%" />

<script type="text/x-kendo-template" id="template">
  #if(Discontinued){#
  <span class="DiscontinuedDisable">#: ProductName # </span> #}else{#
  <span>#: ProductName # </span> #}#
</script>

Answer 2

通常（打字稿）：

nul

在kendo下拉列表中自定义项目的颜色

2 个答案: