Custom Grid Column returned from a js function

[Andy]

I have defined a grid as follows...
            $("#grid").kendoGrid({
                dataSource: {
                    data: result.d,
                    schema: {
                        model: {
                            fields: {
                                ClientID: { type: "string" },
                                ClientName: { type: "string" },
                                ClientIndexRating: { type: "number" },
                                ChrgKPI: { type: "number" },
                                PymtKPI: { type: "number" },
                                RevKPI: { type: "number" }
                            }
                        }
                    }
                },
                navigatable: true,
                scrollable: true,
                sortable: {
                    mode: "multiple"
                },
                groupable: true,
                resizable: true,
                filterable: true,
                reorderable: true,
                selectable: "row",
                columns: [
                    {
                        field: "ClientID",
                        title: "Client ID",
                        width: 100
                    },
                    {
                        field: "ClientName",
                        title: "Client Name",
                        width: 300
                    },
                    {
                        field: "ClientIndexRating",
                        title: "Rating",
                        width: 100
                    },
                    {
                        field: "ChrgKPI",
                        title: "Charges vs. KPI",
                        width: 100,
                        format: "{0:n2}"
                    },
                    {
                        field: "PymtKPI",
                        title: "Payment vs. KPI",
                        width: 100,
                        format: "{0:n2}"
                    },
                    {
                        field: "RevKPI",
                        title: "Revenue vs. KPI",
                        width: 100,
                        format: "{0:n2}"
                    }
                ]
            });
        }

I would like to add two columns that would pass data from the current row to a function and which would in turn go get something and then stuff it into the correct row/column.  How do I go about doing this?

Thanks,
Andy

[Petur Subev]

Hello Andy,

If I understand you correctly you want to create a template columns with a button inside of them which onclick send the currect dataItem to a function which updates it and the changes are applied to the Grid also.
If this is the case then here is an example:

columns.Template(@<text></text>).ClientTemplate("<input type='button' value='click meh' onclick='myfunction(this)'/>");

function myfunction(button) {
        var grid = $(button).closest('.k-grid').data('kendoGrid'); //get the grid
        var dataItem = grid.dataItem($(button).closest('tr')); //get the current dataItem
        dataItem.set('ShipCountry', 'test value');// change the value
}

Regards,
Petur Subev
the Telerik team