Kendo Ui 组合框 - 设置默认值

Posted 2023-05-07

【中文标题】Kendo Ui 组合框 - 设置默认值

【英文标题】：Kendo Ui combobox - set default value

【发布时间】：2015-02-08 18:47:33

【问题描述】：

我成功填充了我的组合框。但现在我正在尝试为组合框设置默认值。例如，让我们说来自源的第三个值。这是我的输入和数据源：

<script>
viewModel.dataSourceType = new kendo.data.DataSource(
    transport: 
        read: 
            url: "/api/Type/Get",
            dataType: "json"
        
    ,
    schema: 
        id: "Id",
        data: "Data",
        model: 
            id: "Id",
            fields: 
        
    
);

<input id="type"
 data-role="combobox"
 data-value-primitive="true"
 data-auto-bind="true"
 data-text-field="Name"
 data-value-field="Id"
 data-bind="value: model.Id, source: dataSourceType">

这可能真的很容易，但我正在为此苦苦挣扎。谢谢。

【参考方案1】：

我假设您正在寻找 index 配置选项。

【参考方案2】：

问题可能出在您的 model 定义中，即您绑定到组合框的内容。

根据您的定义，您的 javascript 应该类似于：

var dataSource = new kendo.data.DataSource(
    type: "odata",
    transport: 
        ...
    
);

var model = new kendo.observable(
    dataSourceType: dataSource,
    model :  Id: 2 
);
kendo.bind($("#type"), model);

其中2 是您希望作为默认（初始）值的值。

意识到我必须为Id 声明一个额外的model，因为您在data-bind 定义中说value 是model.Id。

也许你想说：

var model = new kendo.observable(
    dataSourceType: dataSource,
    Id: 2
);
kendo.bind($("#type"), model);

然后你应该将 html 定义为：

<input id="type"
    data-role="combobox"
    data-value-primitive="true"
    data-auto-bind="true"
    data-text-field="Name"
    data-value-field="Id"
    data-bind="value: Id, source: dataSourceType">

$(document).ready(function() 
  var dataSource = new kendo.data.DataSource(
    type: "odata",
    serverFiltering: true,
    transport: 
      read: 
        url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
      
    
  );
  var model = new kendo.observable(
    dataSourceType: dataSource,
    Id: 2
  );
  kendo.bind($("#cbox"), model);

);

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<input id="cbox"
       data-role="combobox"
       data-value-primitive="true"
       data-auto-bind="true"
       data-text-field="ProductName"
       data-value-field="ProductID"
       data-bind="value: Id, source: dataSourceType">

【参考方案3】：

你可以这样实现。

var combobox = $("#kendoitems").data("kendoComboBox");
combobox.select(1);

您需要将索引值传递给 select(index)。

参考这个http://jsfiddle.net/NdPze/63/