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: