Kendo templates and reserved words

Question

From the GridInForm C# project available from Telerik the file Index.cshtml contains this grid (among other things):

@(Html.Kendo().Grid(Model.Products)
    .Name("Products")
    .ToolBar(tools => tools.Create().Text("Add new product"))
    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
    .Columns(columns =>
    {
        columns.Bound(p => p.Name).ClientTemplate("#= Name #" + 
            "<input type='hidden' name='Products[#= index(data)#].Name' value='#= Name #' />");

        columns.Bound(p => p.ProductID).Hidden().ClientTemplate("#= ProductID #" +
            "<input type='hidden' name='Products[#= index(data)#].ProductID' value='#= ProductID #' />");

        columns.Command(command => command.Destroy()).Width(100);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => 
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
        })
        .ServerOperation(false)
    )
)

And this javascript function:

function index(dataItem) {
    var data = $("#Products").data("kendoGrid").dataSource.data();
    return data.indexOf(dataItem);
}

My question is about finding more information about the data parameter being passed in the template to the index function (in the call to ClientTemplate). What is it and where does it come from?

Answer 1

This line shows the use of the index() function:

"<input type='hidden' name='Products[#= index(data)#].ProductID' value='#= ProductID #' />"

data in this line is a built in object that the Kendo framework creates when it parses the client template. It represents the data object for that particular row.

You can read a bit about the data object here: http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-javascript-function-in-a-column-client-template? under the question titled "How do I use a JavaScript function in a column client template?"

If you want to know specifically what it looks like, you can add a console.wirte(JSON.stringify(dataItem)) to the index() function to see it's exact structure.

edit

Additionally, the client template is just a text string that the Kendo Javascript parses as each column in each row is being created. At that time, it has the data object for that row which it uses to insert the values into the grid. The MVC is just a wrapper for the Javascript libraries that actually generate the HTML in the document.