如何在kendo Grid中设置和获取模板列值/文本

时间:2013-04-17 12:12:56

标签: kendo-ui kendo-grid kendonumerictextbox

考虑我有一个如下所示的剑道网格 http://jsbin.com/uxumab/1/

它有ItemId,Qty,Price和Total(模板)列。 我想让Qty列可编辑,并希望通过更改Qty列来更改总列值。 最后,我想使用迭代通过网格检索所有值的新变化。

1 个答案:

答案 0 :(得分:6)

基本上最简单的方法是通过剑道的MVVM来做到这一点。这是一个例子:

    $(document).ready(function () {
        var gridData = [
              { ItemId: "1001", Qty: 2, price: 200 }
            , { ItemId: "1002", Qty: 1, price: 100 }
            , { ItemId: "1003", Qty: 1, price: 150 }
                     ];

        $("#grid").kendoGrid({
            dataSource: gridData
            , selectable: "row",
          dataBound:function(){
          grid = this;
            grid.tbody.find('tr').each(function(){            
             var item = grid.dataItem(this);
             kendo.bind(this,item);
         })
          }
            , columns: [
                  { field: "ItemId" }
                , { field: "Qty" }
                , { field: "price" }
              , { title: "Quantity", width: "200", template: '<input data-role="numerictextbox" data-bind="value:Qty" data-max-value="100"/>' }                  , {
                     title: "Total"
                    , template: "#=Qty*price#"
                }
            ]
        });



    });

live版。