Working With Row Template In Kendo Grid

View Model:

Create a JavaScript file, in my case I named it ViewModel.Js, The View-Model is a representation of your data (the Model) which will be displayed in the View.

ViewModel.Js

The onDataBound function is used to bind the Models in the Grid.

Data: Create a JavaScript file, in my case I named it Data.Js, This script is responsible to bind the DataSource by requesting the API.

Data.js

1. (function (G, $, K, undefined) {
3. $.extend(true, G, {
4. KendoGrid: {
5. Data: {
6. GridList: new K.data.DataSource({
7. //navigatable: true,
8. batch: true,
9. pageSize: 5,
10. transport: {
11. read: {
12. url: 'api/Employees',
13. type: 'GET',
14. dataType: 'json',
16. },
17. parameterMap: function (data, operation) {
18. if (operation == "read") {
20. return JSON.stringify(data);
21. }
22. return data;
23. }
24. },
25. schema: {
27. model: {
28. id: "EmployeeID",
29. fields: {
30. "FirstName": { type: "string” },
31. "LastName": { type: "string"},
33. }
34. }
35. },
38. }),
40. }
41. }
42. });
43. })(window.Gni = window.Gni || {}, jQuery, kendo);

Core:

Create a JavaScript file, in my case I named it Core.Js. This core script is used to start the rendering of the templates and calls the view model to bind the data in the UI.

Core.js

1. $(function () {
2. var Layout = new kendo.Layout("Layout-temp");
3. var DashboardView = new kendo.View("Dashboard-temp", { model: Gni.KendoGrid.ViewModel.DashboardModel });
4. var router = new kendo.Router({
5. init: function () {
6. Layout.render("#Main");
7. Layout.showIn("#content", DashboardView);
9. }
10. });
11. router.start();
14. });

Result in Browser:

Let us customize the Kendo Grid with ease using the row template.

Consider the scenario where you need to display the full name instead of displaying the first name and last name, here the row templates comes into the picture.

Just modify the above HTML code as below:

Result in Browser:

• JQuery Interview Questions And Answers
• JQueryUI - Day 10 (Menu)