Kendo DropDownlist 模板选择值不使用索引答案

【问题标题】：Kendo DropDownlist template selected value without using indexKendo DropDownlist 模板选择值不使用索引
【发布时间】：2015-05-18 09:49:55
【问题描述】：

我有一个剑道 DropDownList 模板，我想通过 id 选择特定记录而不使用索引。

我想要的是选择具有 CustomerID

的记录

以下是我的代码

$(document).ready(function() {
    $("#shopSupplier").kendoDropDownList({
        change:shopSupplierSelect,
        dataTextField: "ContactName",
        dataValueField: "CustomerID",
        valueTemplate: 'template',
        template: 'template',
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    cache:false,
                    url: "<?=base_url()?>/controller/method",
                }
            }
        }
        //,index:1 /// **I dont want this**
    });
    var dropdownlist = $("#shopSupplier").data("kendoDropDownList");
});

【问题讨论】：

标签： php jquery kendo-ui kendo-grid

【解决方案1】：

如果您想使用id 而不是index，您应该使用：

var dropdownlist = $("#shopSupplier").data("kendoDropDownList");
dropdownlist.select(function(dataItem) {
    return dataItem.CustomerID === 4; // Replace it by the ID of the customer
});

使其通用：

var dropdownlist = $("#shopSupplier").data("kendoDropDownList");
function selectByID(id) {
    dropdownlist.select(function(dataItem) {
        return dataItem.CustomerID === id;
    });
}
selectByID(2);

工作示例：

$(document).ready(function() {
  function shopSupplierSelect() { 
    alert ("select");
  }

  $("#shopSupplier").kendoDropDownList({
    change:shopSupplierSelect,
    dataTextField: "ContactName",
    dataValueField: "CustomerID",
    valueTemplate: kendo.template($("#template").html()),
    template: kendo.template($("#template").html()),
    dataSource: {
      transport: {
        read: function(op) {
          var data = [
            { CustomerID: 1, ContactName: "John" },
            { CustomerID: 3, ContactName: "Jack" },
            { CustomerID: 5, ContactName: "Joseph" },
            { CustomerID: 6, ContactName: "Jill" },
            { CustomerID: 2, ContactName: "Jeff" },
            { CustomerID: 4, ContactName: "Jane" }
          ];
          op.success(data);
        }
      }
    }
    //,index:1 /// **I dont want this**
  });
  var dropdownlist = $("#shopSupplier").data("kendoDropDownList");
  function selectByID(id) {
    dropdownlist.select(function(dataItem) {
      return dataItem.CustomerID === id;
    });
  }

  selectByID(2);
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>

<input id="shopSupplier" />

<script id="template" type="text/kendo-templ">
       <div><b>#= CustomerID # </b> #: ContactName #</div>
</script>

【讨论】：

【解决方案2】：

Kendo UI DropDownList 具有选择特定项目的 select 方法。看看这个链接here

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { id: 1, name: "Apples" },
    { id: 2, name: "Oranges" }
  ],
  dataTextField: "name",
  dataValueField: "id"
});

var dropdownlist = $("#dropdownlist").data("kendoDropDownList");

// selects item if its text is equal to "test" using predicate function
dropdownlist.select(function(dataItem) {
    return dataItem.CustomerID == 12345;
});
</script>

【讨论】：

感谢 Japi 的回复。我需要使用下拉模板而不是仅使用下拉列表。希望你能明白我的意思
ValueTemplate 用于渲染显示的值，而不是用于选择项目。
@OnaBai 在编辑我当前的答案时更快地发布新答案。