使用kendoGrid时,Kendo ui Grid rowTemplate与文本框无法正常工作

时间:2014-03-03 10:54:14

标签: user-interface kendo-ui grid

请查看http://jsfiddle.net/43Nh9/2/

使用声明式方法时,

行模板正在工作,但是当我将div初始化为kendo Grid时,它不适用于文本框。帮助我完成这项工作。

这是我的代码

<div id="grid" data-role="grid" data-editable="inline" data-bind="source: data" data-row-template="row-template"></div>

   <script id="row-template" type="text/x-kendo-template">
   <tr class="k-grid-edit-row" data-uid="#= uid #">
      <td>
      <input class='k-textbox' data-bind="value:Name" />
      </td>
      <td>
          <span>#:Name#</span>
      </td>

      </tr>
   </script>

var viewModel = kendo.observable({

    data: [{
        Name: "1Chai",
        Price: 18.00
    }, {
        Name: "2Chai",
        Price: 18.00
    }, {
        Name: "3Chai",
        Price: 18.00
    }, {
        Name: "4Chai",
        Price: 18.00
    }, {
        Name: "5Chai",
        Price: 18.00
    }, ]

});

kendo.bind(document.body, viewModel);


var grid = $("#grid2").kendoGrid({
    dataSource: {
        data: [{
            Name: "1Chai",
            Price: 18.00
        }, {
            Name: "2Chai",
            Price: 18.00
        }, {
            Name: "3Chai",
            Price: 18.00
        }, {
            Name: "4Chai",
            Price: 18.00
        }, {
            Name: "5Chai",
            Price: 18.00
        }, ]

    },

    rowTemplate: kendo.template($("#row-template").html())

}).data("kendoGrid");

提前致谢。

1 个答案:

答案 0 :(得分:0)

您需要手动将行模型绑定到Grid的TR元素。您可以在dataBound事件处理程序中执行此操作。

e.g。

dataBound: function(){
    var grid = this;
    this.tbody.find('tr').each(function(){
       var tr = $(this);
       kendo.bind(tr, grid.dataItem(tr));
    })
},

Fiddle