Angular – KendoUI Grid – How to integrate it properly

Angular – KendoUI Grid – How to integrate it properly

If you want to use both Angular and Kendo UI components sooner or later you will need to integrate this two libraries.
The majority of this task is quite easy and well documented (http://demos.telerik.com/kendo-ui/grid/angular), but the tricky part is in integration with Angular $http service (or in Angular factories in general). You can use standard Kendo Grid functionality like:

dataSource: {
	type: "aspnetmvc-ajax",
	transport: {
		read: {
			url: "user/registered"),
			type: "GET",
			beforeSend: function (req, options) {
				var authorizationToken = '...';
				req.setRequestHeader('Authorization', authorizationToken);
			},
			complete: function (e) {
				vm.loaded = true;
			}
		}
	}
	...
}

As you can see, you should add some data to each request and also there is custom behaviour when this request successed. But this solution uses jQuery ajax module, not Angular factories. If you want to keep modularity of your code you should use Angular data access methods instead.

In the internet you can find some information about it (1, 2 below), but that is not all. Let’s assume that we have userService factory with method getRegisteredUsers(parameters). We want use it to load data from server.

dataSource: {
	transport: {
		read: function (optionsData) {
			this.options = { prefix: "" };
			var data = kendo.data.transports["aspnetmvc-ajax"].prototype.options.parameterMap.call(this, optionsData.data, "read", false);
			
			var resource = userService.getRegisteredUsers(data).then(
				function success(data) {
					optionsData.success(data);

					vm.loaded = true;
				},
				function failure(data) {
					optionsData.error(data);
				});
		}
	}
	...
}

There are few worth attention elements here. In the first example an object was passed to transport.read property, but in that case we pass function with our custom implementation. On line 7 we use userService factory to obtain data from server, but we need parameters with information about filtering, sorting, etc. We have them in optionsData parameter, but we want have them in other format. To convert them we can use standard Kendo function parameterMap. We need to get these parameters straight from kendo.data.transports (line 5). Then we can pass them in correct format to our factory method and use result to fill dataSource structures (using optionsData.success(data)).
Also we could add our custom behaviour when data will be successfully loaded.

You might wonder, where we lost Authorization code. Because adding authorization header is global behavior, we can move this code to Angular interceptor. That let us implement it in just one place and use it in whole application.

You may read more about parameters conversions in (3, 4)

1 http://blog.falafel.com/using-angularjs-http-service-inside-kendo-ui-datasource/
2 http://blog.falafel.com/using-angularjs-http-service-inside-kendo-ui-datasource-part-2/
3 http://www.telerik.com/forums/parametermap
4 http://www.telerik.com/forums/datasource-transport-function-mode-read-and-wrong-request-parameters