Kendo DropDownlist 模板选择的值未使用索引

Question

我有一个 kendo DropDownList 模板，我想在其中 select 通过 id 的特定记录而不使用索引。

我想要的是 select 一条带有 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");
});

Answer 1

Kendo UI DropDownList 有 select 方法到 select 特定项目。看看这个linkhere

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

Answer 2

如果您想使用 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>

Kendo DropDownlist 模板选择的值未使用索引

Kendo DropDownlist template selected value without using index

php

jquery

kendo-ui

kendo-grid