声明式初始化中的Kendo UI网格详细信息模板

时间:2014-09-09 13:31:29

标签: kendo-ui

我尝试使用声明性初始化来创建带有详细信息模板的网格。如果有人告诉我为什么下面的代码中的详细信息模板不起作用,我将不胜感激。这是我使用的小提琴:http://jsfiddle.net/SiddharthSD2/5MU4r/76/

    <div id="demo-grid" data-role="grid"
    data-bind="source: people" data-columns='[
            {"field": "name", 
             "title": "Full Name"
             },
            {"field":"phone", "title":"Phone"}]'
     data-details-template="detail-template"

></div>

<script id="detail-template" type="text/x-kendo-template">
    <div>
        <span>Phone Number for #=name#:</span>
        <span data-bind="text: phone" />
        <input data-bind="value: phone" />
    </div>
</script>

的JavaScript

var ds = new kendo.data.DataSource({
  data: [
      {name: "Joe", phone: "212-555-1234"}, 
      {name: "Sally", phone: "212-999-7785"},
      {name: "Bill", phone: "212-244-7035"}
  ]
});

// Create an observable object.
var vm = kendo.observable({
    people: ds,
});
kendo.bind($("#demo-grid"),vm);

1 个答案:

答案 0 :(得分:0)

不是data-details-template="detail-template"而是data-detail-template="detail-template"(单数详细)。

你的JSFiddle在这里修改了http://jsfiddle.net/OnaBai/5MU4r/77/