Contribute
Angular

Master Details With AngularJS

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']);  
  2.   
  3. app.config(['$routeProvider', function($routeProvider) {  
  4.   
  5.     $routeProvider.when('/MasterDetail', {  
  6.   
  7.         templateUrl: '/CustomerApp/Views/MasterDetailsDemo.html',  
  8.         controller: 'CustomerController'  
  9.   
  10.     }).otherwise({  
  11.         controller: 'CustomerController'  
  12.     });  
  13.   
  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) {  
  2.   
  3.     $scope.orderGrid = {};  
  4.     $scope.customerGrid = {};  
  5.   
  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.     }];  
  28.   
  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.     };  
  143.   
  144.   
  145. });  
Create HTML Page
To add HTML Page, right click on Views folder> Add > HTML page.

HTML

MasterDetailsDemo.html
  1. <!DOCTYPEhtml>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <metacharsetmetacharset="utf-8" />  
  7. </head>  
  8.   
  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>  
  21.   
  22.         </div>  
  23. </body>  
  24.   
  25. </html>  
Before running, we need to add some libraries inside index.html, as shown below-

Index.html
  1. <!DOCTYPEhtml>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <metacharsetmetacharset="utf-8" />  
  7.     <!-- CSS -->  
  8.     <linkhreflinkhref="CSS/jqx.base.css" rel="stylesheet" />  
  9.   
  10. </head>  
  11.   
  12. <bodyng-appbodyng-app="myApp">  
  13.   
  14.     <divng-view>  
  15.         </div>  
  16.   
  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>  
  22.   
  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>  
  48.   
  49.                                                                 <!-- CustomerApp.js -->  
  50.                                                                 <scriptsrcscriptsrc="CustomerApp/CustomerApp.js">  
  51.                                                                     </script>  
  52.   
  53.                                                                     <!-- CustomerController.js -->  
  54.                                                                     <scriptsrcscriptsrc="CustomerApp/CustomerController.js">  
  55.                                                                         </script>  
  56.                                                                         </body>  
  57.   
  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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs