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:
Conclusion
I hope you enjoyed learning on how to display the Grid in AngularJS ng-dialog.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
