Question

我有一个kendo 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");
});

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

工作示例：

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

2 个答案: