Dynamic Angular UI Grid
Posted By : Milind Ahuja | 29-Mar-2017
UI- Grid, is a table purely built on Angular JS library without any other dependencies other than Angular JS itself and it covered all core grid features like sorting, paging, filtering, exporting etc. which are layered on as modules and directives.
Following are the steps to include this Grid in your Angular application:
1. Firstly, you need to have Angular library in your project:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script>
2. Then you have to add the following script and css file in header section:
<script src="http://ui-grid.info/release/ui-grid.js" type="text/javascript"></script>
<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" type="text/css" />
3. Then, Include ui.grid module as a dependency in your app:
var app = angular.module("uigridApp", ["ui.grid"]);
More on Angular UI-Grid and the ways to create a simple and static UI Grid, you can find in the following link:
This blog is to show how to create dynamic UI-Grid columns. Following is the image of UI Grid with dynamic columns:
Following is the code which will get the work done:
HTML:
In html code we need to define ui-grid directive and specify JSON object to render data with ui-grid like as shown following :
CONTROLLER:
An example of defining the options and columns of a grid looks like :
//binding user account form data to grid
$scope.formGridData = {
data: 'formDetails',
enableSorting: true,
columnDefs: [{ field: 'name' },
{ field: 'age' },
{ field: 'location'}]
};
Though, we don't define the columns here as we want them dynamically and not statically.
In the following code we are going to define the columnDefs in the success function where we are getting our JSON objects and according to this, we are going to create Grid columns.
$http.get('form.json')
.success(function(data) {
$scope.formData = data;
console.log($scope.formData);
//create dynamic columns for patients grid
var columnDefForFormGrid = [];
for (var i = 0; i < $scope.formData.length; i++) {
if ($scope.formData[i].isSelected) {
columnDefForFormGrid.push({
name: $scope.formData[i].fieldName,
displayName: $scope.formData[i].labelName
})
}
}
//If you want to add a static column in your Grid, you can create it and push in your grid like this:
columnDefForFormGrid.push({
name: 'action',
width: 100,
});
$scope.formGridData.columnDefs = columnDefForFormGrid;
$scope.getDetails();
});
$scope.getDetails = function() {
$http.get('data.json')
.success(function(data) {
$scope.formDetails = data.formDetails;
console.log($scope.formDetails);
});
}
In the above code we are getting our array of object to render data with ui-grid after we defining the columns for ui-grid.
form.json
[{
"fieldName": "dob",
"isSelected": true,
"labelName": "Date of Birth"
}, {
"fieldName": "firstName",
"isSelected": true,
"labelName": "First Name"
}, {
"fieldName": "lastName",
"isSelected": true,
"labelName": "Last Name"
}, {
"fieldName": "category",
"isSelected": true,
"labelName": "Category"
}, {
"fieldName": "ippNumber",
"isSelected": false,
"labelName": "IPP Number"
}, {
"fieldName": "evamNumber",
"isSelected": false,
"labelName": "EVAM Number"
}, {
"fieldName": "fullName",
"isSelected": false,
"labelName": "Full Name"
}]
data.json
{
"formDetails": [{
"firstName": "Milind",
"id": 1,
"lastName": "Ahuja"
}]
}
RESULT
As it is clear to see, from form.json, only those columns are displayed whose "isSelected" is true. displayName is to display the columns and name is to display the data within the grid. For ex. in $scope.formData[i].fieldName we are getting "firstname" from form.json and from data.json we get the firstname. This is how it works for rest of the columns.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.