Nested Kendo Grid Using Angular

Raviteja Swayampu
7y
6.4k
0
2

Article

In this article, we are going to learn about implementing nested Kendo Grid, using angular js and Webapi in ASP.NET MVC 5 Web Application. In previous articles we learned about implementing CRUD operations in Kendo Grid using Angular js framework with WebAPI. If you are new to Web API, please refer previous posts.

Note: If you are not comfortable with Angular js, you can also implement Kendo Grid, using jQuery. Also please refer to Implementing CRUD operations on kendo grid using jquery. Angular Kendo Grid also internally uses jQuery for the data operations (retrieval, update, delete etc).

Now, let's discuss about our new tutorial Nested Kendo Grid implementation in this article.

Create a Basic Kendo grid using angular js

Please refer to this previous post link to implement the basic Kendo Grid (Here, I am extending the previous sample Application).
This is the screen shot of final nested Kendo Grid.
I will explain the changes, I did, step by step.

Add another table to DB

Here, I created another table "TDetails" to show the nested details for a grid row.
Schema definition for TDetails are as follows-
1. CREATE TABLE [dbo].[TDetails] (
2. [DetailsID] INT IDENTITY (1, 1) NOT NULL,
3. [CompanyName] VARCHAR (50) NOT NULL,
4. [Salary] VARCHAR (50) NOT NULL,
5. [Location] VARCHAR (50) NOT NULL,
6. [StudentID] INT NULL,
7. PRIMARY KEY CLUSTERED ([DetailsID] ASC)
8. );
Now, click StudentEntity.edmx file in Models folder. You will get an Entity diagram, as shown below-
Click Update Model from the database and add the table, you recently created to StudentEntity.edmx.
Here, I already added the Table.

Add a new method to api Controller

Add the code, given below, to get JSON data for the nested grid.
1. [HttpGet]
2. [Route("StudentDetails/{id}")]
3. public HttpResponseMessage GetStudentDetails(int id)
4. {
5. try
6. {
7. var studesription = db.TDetails.Where(a => a.StudentID.Equals(id)).ToList();
8. return Request.CreateResponse(HttpStatusCode.OK, studesription, Configuration.Formatters.JsonFormatter);
10. }
11. catch (Exception ex)
12. {
13. return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
14. }
15. }
This method gets the data from API controller, based on StudentID. Add the extra code, given below, to view-
Add the extra code, given below, to Index view to make Kendo nested-
1. 
2. <div id="example" ng-app="KendoGridDemo">
3. <h3>CRUD operations on Kendo grid using Angualr JS & webapi</h3>
4. <div ng-controller="Controller">
5. <kendo-grid k-options="mainGridOptions">
6. 
7. <div k-detail-template>
8. <div>
9. <div kendo-grid k-options="subgridOptions(dataItem)">
10. </div>
11. </div>
12. </div>
13. 
14. </kendo-grid>
15. </div>
16. </div>
I added the nested grid template to the main grid. 5. Add the scripting code, given below, to populate the nested grid with the data.
1. //add this code in maingrid options
2. dataBound: function () {
3. this.expandRow(this.tbody.find("tr.k-master-row").first());
4. },
6. //nested grid oprtions
7. $scope.subgridOptions = function (dataItem) {
8. return {
9. dataSource: {
10. type: "json",
11. transport: {
12. read: {
13. url: "http://localhost:13547/api/TStudentsAPI/StudentDetails/" + dataItem.StudentID,
14. dataType:"json"
15. }
16. },
17. serverPaging: true,
18. serverSorting: true,
19. serverFiltering: true,
20. pageSize: 5,
21. },
22. scrollable: false,
23. sortable: true,
24. pageable: true,
25. columns: [
26. {
27. field: "DetailsID",
28. title: "DetailsID",
29. width: "180px"
30. },
31. {
32. field: "CompanyName",
33. title: "Company Name",
34. width: "180px"
35. },
36. {
37. field: "Salary",
38. title: "Salary",
39. width: "180px"
40. },
41. {
42. field: "Location",
43. title: "Location",
44. width: "180px"
45. },
47. ]
48. };
The complete Index view code after the changes are given below-
1. 
2. <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" />
3. <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.flat.min.css" />
4. <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
6. 
7. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
8. <script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
9. <script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
10. <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
12. 
13. <div id="example" ng-app="KendoGridDemo">
14. <h3>CRUD operations on Kendo grid using Angualr JS & webapi</h3>
15. <div ng-controller="Controller">
16. <kendo-grid k-options="mainGridOptions">
17. 
18. <div k-detail-template>
19. <div>
20. <div kendo-grid k-options="subgridOptions(dataItem)">
21. </div>
22. </div>
23. </div>
24. 
25. </kendo-grid>
26. </div>
27. </div>
29. <script>
30. //Create a anular app and controller add kendo dependency to app
31. angular.module("KendoGridDemo", ["kendo.directives"])
32. .controller("Controller", function ($scope) {
33. //specify kendo grid options
34. $scope.mainGridOptions = {
35. dataSource: {
36. type: "json", //data type
37. transport: {
38. destroy: {
39. url: "api/TStudentsAPI",
40. type: "DELETE"
41. }, read: {
42. url: "http://localhost:13547/api/TStudentsAPI",
43. dataType: "json",
44. },
45. create:
46. {
47. url: "http://localhost:13547/api/TStudentsAPI",
48. type: "POST"
49. },
50. update:
51. {
52. url: "api/TStudentsAPI",
53. type: "PUT",
54. parameterMap: function (options, operation) {
55. if (operation !== "read" && options.models) {
56. return {
57. models: kendo.stringify(options.models)
58. };
59. }
60. }
61. },
62. },
63. schema: //schema of the table data
64. {
65. model:
66. {
67. id: "StudentID",
68. fields: {
69. StudentID: { editable: false, nullable: false, type: "number" },
70. FullName: { editable: true, nullable: true, type: "string" },
71. Contact: { editable: true, nullable: true, type: "number" },
72. Country: { editable: true, nullable: true, type: "string" },
73. Designation: { editable: true, nullable: true, type: "string" }
74. }
75. }
76. },
77. pageSize: 5,
78. serverPaging: true,
79. serverSorting: true
80. },
81. editable: "popup", //editable type popup/inline/batch
82. toolbar: ["create"], //toolbar options
83. sortable: {
84. mode: "single", //sorting
85. allowUnsort:true
86. },
87. pageable: { //paging
88. buttonCount: 5
89. },
90. resizeable: true, //resizing
91. scrollable: false,
92. dataBound: function () {
93. this.expandRow(this.tbody.find("tr.k-master-row").first());
94. },
95. //specify columns that you want to display
96. columns: [{
97. field: "StudentID",
98. title: "Student ID",
99. width: "180px"
100. },
101. {
102. field: "FullName",
103. title: "FullName",
104. width: "180px"
105. },
106. {
107. field: "Contact",
108. title: "Contact",
109. width: "180px"
110. },
111. {
112. field: "Country",
113. title: "Country",
114. width: "180px"
115. },
116. {
117. field: "Designation",
118. title: "Designation",
119. width: "180px"
120. },
121. //actions columns contains-- edit/delete
122. {
123. title:"Actions",
124. command: ["edit",
125. {
126. name: "destroy",
127. text: "Delete",
128. width: "120px"
129. }
130. ],
131. }
132. ]
133. };
134. $scope.subgridOptions = function (dataItem) {
135. return {
136. dataSource: {
137. type: "json",
138. transport: {
139. read: {
140. url: "http://localhost:13547/api/TStudentsAPI/StudentDetails/" + dataItem.StudentID,
141. dataType:"json"
142. }
143. },
144. serverPaging: true,
145. serverSorting: true,
146. serverFiltering: true,
147. pageSize: 5,
148. },
149. scrollable: false,
150. sortable: true,
151. pageable: true,
152. columns: [
153. {
154. field: "DetailsID",
155. title: "DetailsID",
156. width: "180px"
157. },
158. {
159. field: "CompanyName",
160. title: "Company Name",
161. width: "180px"
162. },
163. {
164. field: "Salary",
165. title: "Salary",
166. width: "180px"
167. },
168. {
169. field: "Location",
170. title: "Location",
171. width: "180px"
172. },
174. ]
175. };
176. };
177. });
178. </script>
Now, run the Application and see the output in the Browser.
Download the source code for this Application here Source Code(VS2015 code) .

Conclusion

I hope, this tutorial is understandable and useful for every reader. Please comment, if you have suggestions for any modification to improve the quality of an article. Please see this article in my blog Nested Kendo Grid.

Up Next

Ebook Download

View all

Diving Into ASP.NET WebAPI

Read by 6.2k people

Download Now!

Learn

View all