Binding MVVM to a Grid Row Template

[Clinton Smyth]

Hi

I have a grid with a row template defined that I need to bind to the viewModel

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

 

 

    <script id="row-template" type="text/x-kendo-template">

      <tr>

      <td>

      <input class='k-textbox' data-bind="value: Name, source: gridSource" width: '150px'/>

      </td>

      <td>

      <input class='k-textbox' data-bind="value: Price, source: gridSource" width: '150px'/>

      </td>

      <td>

      <input class='k-textbox' data-bind="value: UnitsInStock, source: gridSource" width: '150px'/>

      </td>

      </tr>

    </script>

 

 

   <script>   

         

      $("#grid").kendoGrid({

        dataSource: {

          schema: {

                model: {

                    fields: {

                        Name: { validation: { required: true} },

                        Price: { validation: { required: true} },

                        UnitsInStock: { validation: { required: true } }

                    }

                }

            }

        },

        columns: [

              { field: "Name", title: "Name", width: "150px" },

              { field: "Price", title: "Price", width: "150px" },

              { field: "UnitsInStock", title: "Units In Stock", width: "150px" },

          ],

      });

       

            var viewModel = kendo.observable({

                gridSource: [

                    { Name: "1Chai", Price: 18.00, UnitsInStock: 39 },

                    { Name: "2Chai", Price: 18.00, UnitsInStock: 39 },

                    { Name: "3Chai", Price: 18.00, UnitsInStock: 39 },

                    { Name: "4Chai", Price: 18.00, UnitsInStock: 39 },

                    { Name: "5Chai", Price: 18.00, UnitsInStock: 39 },

                    ],

                displayGridSource: function() {

                    var gridSource1 = this.get("gridSource");

                    return $.map(gridSource1, function(product) {

                        return "\t" + kendo.stringify(product);

                    }).join(",\r\n");

                }

            });

             

            kendo.bind($("table"), viewModel);

         

    </script>

It's 'half working' in that the first Name in the first row is bound and updates the viewModel.  After that I get an error 'Uncaught TypeError: undefined has no properties'.  Attempting to update any other text boxes result in the same error.

2 more questions:

1. Is it possible to bind to the onFocus event?
2. Is there a way to determine the index of the viewModel array that a row is bound to?
   
   

I want to capture the onFocus event of a text box in the row template and update the model based on the index of the row that contains the textbox.

[Atanas Korchev]

Hi,

 I have created a sample showing how to do this: http://jsfiddle.net/korchev/TFQ88/2/ 
 
 There is one problem though. The grid rebinds itself when a value is changed in the data source.

Reards,
Atanas Korchev
the Telerik team