Combining Kendo UI–Grid with Angular.js–Pass selected item to controller

A colleague couldn’t find a clean solution to pass the selected row in a Kendo Grid to an Angular controller method. So here is a short code snippet that shows how this can be done:

• Here is the UI(admire my great design skills):

• Here is the corresponding HTML and Angular controller:

	'use strict';
	(function () {
	var productsApp = angular.module('productsApp', ['ngRoute', 'kendo.directives']);
	productsApp
	.config(['$routeProvider','$locationProvider', function ($routeProvider,$locationProvider) {
	$routeProvider
	.when('/productapp/products', { templateUrl: '/ProductsApp/ListProducts/list.html', controller: 'listProductsController', controllerAs:'vm' })
	.when('/productapp/products/add', { templateUrl: '/ProductsApp/AddProduct/add.html', controller: 'addProductController', controllerAs:'vm' })
	.otherwise({ redirectTo: '/productapp/products' });
	$locationProvider.html5Mode(true);
	}]);
	}());

view raw app.js hosted with ❤ by GitHub

	<div>Products with kendo</div>
	<kendo-grid k-data-source="vm.products" k-sortable="true" k-options="vm.gridOptions">
	</kendo-grid>
	<div>
	<a href="#" ng-click="vm.createNewProduct()">New product</a>
	</div>

view raw products.html hosted with ❤ by GitHub

	'use strict';
	(function (app) {
	var listProductsController = function ($location, listProductsService) {
	var that = this;
	listProductsService.getProducts().then(function (response) {
	that.products = new kendo.data.DataSource({
	data: response.data,
	pageSize: 5
	});
	}).catch(function (data) {
	})['finally'](function () {
	});
	this.createNewProduct = function () {
	$location.url('/app/products/add');
	};
	this.clickMe = function (dataItem) {
	console.log(dataItem + 'clicked!');
	}
	this.gridOptions={
	columns: [
	{ field: "Name", title: "Name" },
	{ field: "DisplayName", title: "DisplayName" },
	{
	command: {
	text: "click me!",
	template: '<button type="button" ng-click="vm.clickMe(dataItem)">click me!</button>'
	},
	title: " "
	}
	]};
	};
	app.controller('listProductsController', ['$location','listProductsService', listProductsController]);
	}(angular.module('productsApp')));

view raw products.js hosted with ❤ by GitHub