Articles in this section
Category / Section

How to display the Grid in AngularJS ng-dialog ?

1 min read

This explains that to display the Grid in AngularJS ng-Dialog.

 

Solution

You need to include ngDialog.js and ngDialog.css (as minimal setup) to your project and then you can start using ngDialog provider in your directives, controllers and services

 

 
<script src="scripts/angular.min.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/jquery.easing.1.3.min.js"></script>
<script src="scripts/jquery.globalize.min.js"></script>
<script src="scripts/jsrender.min.js"></script>
<script src="scripts/ej.web.all.min.js"></script>
 
<link href="themes/ngDialog.css" rel="stylesheet" />
<link href="themes/ngDialog-theme-default.css" rel="stylesheet" />
<link href="themes/ngDialog-theme-plain.css" rel="stylesheet" />
<link href="themes/ngDialog-custom-width.css" rel="stylesheet" />
<script src="scripts/ngDialog.min.js"></script>
 
<script src="Grid.js"></script>
 

 

In Open method of ng-dialog we need to the define template as a html file.

 

Dialog template can be loaded through path to external html file or <script> tag with text/ng-template. In html file we have to render the grid.

 
<body>
    <div ng-app="myApp">
            <div ng-controller="Dialog">
                <div ng-form ="Form">
                    <button ng-click="addGrid()">Click</button>
                </div>
            </div>
        </div> 
</body>
 
$scope.addGrid = function () {
            ngDialog.open({
                template: 'Grid.html',
                scope : $scope
          });
    }
 
var app = angular.module('myApp', ['ngDialog', 'ejangular']);
app.controller('Dialog', function ($scope, ngDialog) {
    var dataManger = ej.DataManager({
        url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/",
    });
 
        $scope.data = dataManger;
    //});
    $scope.columns = [
        { field: "OrderID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 },
        { field: "CustomerID", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 }
    ];
    $scope.addGrid = function () {
            ngDialog.open({
                template: 'Grid.html',
                scope : $scope
          });
    }
});
 
------------------------------------------------------------------
 
Grid.html
 
<div id="Grid" ej-grid e-datasource="data" e-columns="columns" e-allowpaging="true"></div>
 

 

Result:

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied