Kendo Ui组合框 - 设置默认值

时间:2014-12-10 14:18:51

标签: javascript mvvm kendo-ui kendo-combobox

我成功填满了我的组合框。但现在我试图为组合框设置默认值。例如,让我们说来源的第三个值。这是我的输入和数据源:

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

这可能很容易,但我对此很感兴趣。谢谢。

3 个答案:

答案 0 :(得分:4)

我假设您要查找index配置选项。

答案 1 :(得分:0)

可能问题出在你的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是您想要的默认(初始)值。

意识到我必须为model声明额外的Id,因为您在data-bind定义中说valuemodel.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">

答案 2 :(得分:0)

你可以这样做。

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

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

请参阅此http://jsfiddle.net/NdPze/63/