4

Consider I have a kendo grid like following
http://jsbin.com/uxumab/1/

It has ItemId, Qty, Price and Total(template) column. I want to make Qty column editable and want to change total column value with the change of Qty column. Finally I want to retrieve all the values with new changes using iteration through grid.

OnaBai
  • 40,767
  • 6
  • 96
  • 125
Hasibul
  • 569
  • 2
  • 6
  • 21

1 Answers1

7

Basically the easiest way would be to do this through the MVVM of kendo. Here is an example:

    $(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#"
                }
            ]
        });



    });

And live version.

Petur Subev
  • 19,983
  • 3
  • 52
  • 68
  • 1
    Thanks a lot. Its working. can you share some resource link from where i can learn more dtails about dataBound and template. – Hasibul Apr 18 '13 at 05:12
  • 1
    I have another query. If i want to change total amount with the change of Quantity instead of leaving row then how i can achieve this. That means i want to add action on spin event of numeric textbox. Hope you will help me. – Hasibul Apr 18 '13 at 08:14