Use Different Editors Based on the Column Values of the Grid

<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    template: kendo.template($("#name-template").html())
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

        <script id="altRowTemplate" type="text/x-kendo-tmpl">
            <tr class="k-alt" data-uid="#: uid #">
	            <td class="photo">
                   <img src="../content/web/Employees/#:data.EmployeeID#.jpg" alt="#: data.EmployeeID #" />
	            </td>
	            <td class="details">
		           <span class="name">#: FirstName# #: LastName# </span>
		           <span class="title">Title: #: Title #</span>
	            </td>
	            <td class="country">
		            #: Country #
	            </td>
                <td class="employeeID">
	               #: EmployeeID #
	            </td>
           </tr>
        </script>
        <script>
           $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                      type: "odata",
                      transport: {
                          read: {
                              url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
                          }
                      }
                    },
                    rowTemplate: kendo.template($("#rowTemplate").html()),
                    altRowTemplate: kendo.template($("#altRowTemplate").html()),
                    height: 550
                });
           });
        </script>

Solution
To get the dataItem for each selected row:

In the change event handler, get and save the rows in a variable by using the select method.
Loop through the rows by using the each jQuery method.
Get every row data by using the dataItem method.

​

Notes