Introduction

In this article, you will learn about master details, using jqWidgets Framework with AngularJS. I hope, you will like this.

Note - You can download zip file from jqWidgets.

Create your Application

Open Visual Studio and select File, click New Project.

The "New Project" Window will pop up. Select ASP.NET Web Application (.NET Framework), name your project and click OK.

template

Next, new Window will pop up for selecting the template. We are going to choose Empty and click OK.

Part

Angular Part

Here, we need to create a new folder, which includes two JS files respectively- Customer App.js and CustomerController.js.

Angular

In order to create new JS files. Right click on CustomerApp folder > Add > JavaScript File.

Angular

Angular

CustomerApp.js

  1. var app = angular.module('myApp', ['ngRoute', 'jqwidgets']);
  3. app.config(['$routeProvider', function($routeProvider) {
  5. $routeProvider.when('/MasterDetail', {
  7. templateUrl: '/CustomerApp/Views/MasterDetailsDemo.html',
  8. controller: 'CustomerController'
  10. }).otherwise({
  11. controller: 'CustomerController'
  12. });
  14. }]);
As you can see above, we have definedAngularJS module(in our case myApp) and injecting ngRoute module, which allows us to use routing thenjqwidgetsmodule to use Master Details control.

CustomerController.js
  1. app.controller('CustomerController', function($scope) {
  3. $scope.orderGrid = {};
  4. $scope.customerGrid = {};
  6. $scope.customers = [{
  7. "CustomerID": "ALFKI",
  8. "CompanyName": "Alfreds Futterkiste",
  9. "ContactName": "Maria Anders",
  10. "ContactTitle": "Sales Representative",
  11. "City": "Berlin",
  12. "Country": "Germany"
  13. }, {
  14. "CustomerID": "ANATR",
  15. "CompanyName": "Ana Trujillo Emparedados y helados",
  16. "ContactName": "Ana Trujillo",
  17. "ContactTitle": "Owner",
  18. "City": "Mxico D.F.",
  19. "Country": "Mexico",
  20. }, {
  21. "CustomerID": "ANTON",
  22. "CompanyName": "Antonio Moreno Taquera",
  23. "ContactName": "Antonio Moreno",
  24. "ContactTitle": "Owner",
  25. "City": "Mxico D.F.",
  26. "Country": "Mexico"
  27. }];
  29. $scope.orders = [{
  30. "OrderID": 10248,
  31. "CustomerID": "ALFKI",
  32. "EmployeeID": 5,
  33. "OrderDate": "1996-07-04 00:00:00",
  34. "RequiredDate": "1996-08-01 00:00:00",
  35. "ShippedDate": "1996-07-16 00:00:00",
  36. "ShipVia": 3,
  37. "Freight": 32.3800,
  38. "ShipName": "Vins et alcools Chevalier"
  39. }, {
  40. "OrderID": 10249,
  41. "CustomerID": "ALFKI",
  42. "EmployeeID": 6,
  43. "OrderDate": "1996-07-05 00:00:00",
  44. "RequiredDate": "1996-08-16 00:00:00",
  45. "ShippedDate": "1996-07-10 00:00:00",
  46. "ShipVia": 1,
  47. "Freight": 11.6100,
  48. "ShipName": "Toms Spezialitten"
  49. }, {
  50. "OrderID": 10250,
  51. "CustomerID": "ANATR",
  52. "EmployeeID": 4,
  53. "OrderDate": "1996-07-08 00:00:00",
  54. "RequiredDate": "1996-08-05 00:00:00",
  55. "ShippedDate": "1996-07-12 00:00:00",
  56. "ShipVia": 2,
  57. "Freight": 65.8300,
  58. "ShipName": "Hanari Carnes",
  59. }, {
  60. "OrderID": 10251,
  61. "CustomerID": "ANATR",
  62. "EmployeeID": 3,
  63. "OrderDate": "1996-07-08 00:00:00",
  64. "RequiredDate": "1996-08-05 00:00:00",
  65. "ShippedDate": "1996-07-15 00:00:00",
  66. "ShipVia": 1,
  67. "Freight": 41.3400,
  68. "ShipName": "Victuailles en stock"
  69. }, {
  70. "OrderID": 10252,
  71. "CustomerID": "ANTON",
  72. "EmployeeID": 4,
  73. "OrderDate": "1996-07-09 00:00:00",
  74. "RequiredDate": "1996-08-06 00:00:00",
  75. "ShippedDate": "1996-07-11 00:00:00",
  76. "ShipVia": 2,
  77. "Freight": 51.3000,
  78. "ShipName": "Suprmes dlices"
  79. }];
  80. $scope.ordersData = [];
  81. $scope.customerGridSettings = {
  82. width: 850,
  83. height: 250,
  84. source: $scope.customers,
  85. keyboardnavigation: true,
  86. columns: [{
  87. text: 'Company Name',
  88. datafield: 'CompanyName',
  89. width: 250
  90. }, {
  91. text: 'Contact Name',
  92. datafield: 'ContactName',
  93. width: 150
  94. }, {
  95. text: 'Contact Title',
  96. datafield: 'ContactTitle',
  97. width: 180
  98. }, {
  99. text: 'City',
  100. datafield: 'City',
  101. width: 120
  102. }, {
  103. text: 'Country',
  104. datafield: 'Country'
  105. }],
  106. rowselect: function(event) {
  107. var customerID = event.args.row.CustomerID;
  108. var records = new Array();
  109. var length = $scope.orders.length;
  110. for (var i = 0; i < length; i++) {
  111. var record = $scope.orders[i];
  112. if (record.CustomerID == customerID) {
  113. records[records.length] = record;
  114. }
  115. }
  116. $scope.ordersData = records;
  117. }
  118. };
  119. $scope.orderGridSettings = {
  120. width: 850,
  121. height: 250,
  122. source: $scope.ordersData,
  123. keyboardnavigation: true,
  124. columns: [{
  125. text: 'OrderID',
  126. datafield: 'OrderID',
  127. width: 100
  128. }, {
  129. text: 'OrderDate',
  130. datafield: 'OrderDate',
  131. cellsformat: 'd',
  132. width: 150
  133. }, {
  134. text: 'Shipped Date',
  135. datafield: 'ShippedDate',
  136. cellsformat: 'd',
  137. width: 150
  138. }, {
  139. text: 'Ship Name',
  140. datafield: 'ShipName'
  141. }]
  142. };
  145. });
Create HTML Page
To add HTML Page, right click on Views folder> Add > HTML page.

HTML

MasterDetailsDemo.html
  1. <!DOCTYPEhtml>
  2. <html>
  4. <head>
  5. <title></title>
  6. <metacharsetmetacharset="utf-8" />
  7. </head>
  9. <body>
  10. <divclassdivclass="example-description">
  11. <div>
  12. <h3>
  13. Customers List
  14. </h3>
  15. <jqx-gridjqx-settingsjqx-gridjqx-settings="customerGridSettings" jqx-create="customerGridSettings" jqx-instance="customerGrid"></jqx-grid>
  16. <h3>
  17. Orders by Customer
  18. </h3>
  19. <jqx-gridjqx-settingsjqx-gridjqx-settings="orderGridSettings" jqx-create="orderGridSettings" jqx-instance="orderGrid"></jqx-grid>
  20. </div>
  22. </div>
  23. </body>
  25. </html>
Before running, we need to add some libraries inside index.html, as shown below-

Index.html
  1. <!DOCTYPEhtml>
  2. <html>
  4. <head>
  5. <title></title>
  6. <metacharsetmetacharset="utf-8" />
  7. <!-- CSS -->
  8. <linkhreflinkhref="CSS/jqx.base.css" rel="stylesheet" />
  10. </head>
  12. <bodyng-appbodyng-app="myApp">
  14. <divng-view>
  15. </div>
  17. <!-- AngularJS libraries-->
  18. <scriptsrcscriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js">
  19. </script>
  20. <scriptsrcscriptsrc="https://code.angularjs.org/1.4.7/angular-route.js">
  21. </script>
  23. <!-- JS libraries-->
  24. <scriptsrcscriptsrc="scripts/jquery-1.11.1.min.js">
  25. </script>
  26. <scriptsrcscriptsrc="scripts/jqxcore.js">
  27. </script>
  28. <scriptsrcscriptsrc="scripts/jqxdata.js">
  29. </script>
  30. <scriptsrcscriptsrc="scripts/jqxbuttons.js">
  31. </script>
  32. <scriptsrcscriptsrc="scripts/jqxcheckbox.js">
  33. </script>
  34. <scriptsrcscriptsrc="scripts/jqxgrid.js">
  35. </script>
  36. <scriptsrcscriptsrc="scripts/jqxgrid.selection.js">
  37. </script>
  38. <scriptsrcscriptsrc="scripts/jqxmenu.js">
  39. </script>
  40. <scriptsrcscriptsrc="scripts/jqxscrollbar.js">
  41. </script>
  42. <scriptsrcscriptsrc="scripts/jqxgrid.sort.js">
  43. </script>
  44. <scriptsrcscriptsrc="scripts/jqxangular.js">
  45. </script>
  46. <scriptsrcscriptsrc="scripts/demos.js">
  47. </script>
  49. <!-- CustomerApp.js -->
  50. <scriptsrcscriptsrc="CustomerApp/CustomerApp.js">
  51. </script>
  53. <!-- CustomerController.js -->
  54. <scriptsrcscriptsrc="CustomerApp/CustomerController.js">
  55. </script>
  56. </body>
  58. </html>
Output - To run your demo, press F5 and change URL address, as given below-
http://localhost:50035/#/MasterDetail

When you select the customer row, as given in the snapshot below, it will show all the orders related to the customer.

<!DOCTYPEhtml /> <html> <head> <title></title> <metacharset="utf-8" /><bgsound cep=
That’s all. Please send your feedback and queries in the comments box.