What
is ng-grid? How to achieve it?
The ng-grid is purely angularjs library, it's based
on slick-grid and Its highly customizable and performance data-grid.
Go to below ng-grid library link
http://angular-ui.github.io/ng-grid/
Steps to achieve the ng-grid as given below
1.
Add the angularjs reference file
2.
Add ng-grid reference file
3.
Written the JavaScript code to render
the ng-grid data.
4.
Written the HTML code for render the
DOM with ng-grid data.
The AngularJs
Reference file download from as given below link
The ng-grid Reference file download from as
given below link
The JavaScript code sample
//This is current loged user
UIds.
var uid =
parseInt(session().mobileNo);
var baseURL ="http://locahost:8080/"
var app =
angular.module('ngGridApp',
['ngGrid']);
app.service('ngGridService', function ($http) {
this.getStudents = function () {
return $http({
method: 'GET',
url: baseURL + 'Api/Students/Get/' + uid
});
};
});
app.controller('ngGridCtrl', function ($scope,
ngGridService) {
$scope.students = null;
//Call services method in
Controller.
ngGridService.getStudents().then(function (resp) {
if (resp.data !==
undefined && resp.data !== null) {
$scope.students =
resp.data;
}
})
.finally(function () {
//TODO: If needed
anything else by you!
});
//This is custom template
used to display custom data.
var dateWithUpdatedBy =
'<div>{{row.entity.LastUpdateBy}},
{{row.entity.LastUpdateDate | date:"yyyy-MM-dd"}}</div>';
$scope.studentsColumns = [
{ field: 'MobileNo', displayName: 'MobileNo' },
{ field: 'StudentName', displayName: 'StudentName' },
{ field: 'Email', displayName: 'Contact Email'},
{
field: 'LastUpdateBy', displayName: 'Last Update'
cellTemplate:
dateWithUpdatedBy
}];
$scope.studentsGridView = {
data: 'students',
columnDefs: 'studentsColumns',
enablePaging: false,
showFooter: false,
sortable: true
};
});
The HTML code sample
<div ng-app="ngGridApp">
<div ng-controller="ngGridCtrl">
<div class="ngGridStyle" ng-grid="companyGridView"></div>
</div>
</div >
The full(JavaScript + HTML) live demo code
sample
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script>
//This is current loged user
UIds.
var uid =
parseInt(session().mobileNo);
var baseURL ="http://locahost:8080/"
var app =
angular.module('ngGridApp',
['ngGrid']);
app.service('ngGridService', function ($http) {
this.getStudents = function () {
return $http({
method: 'GET',
url: baseURL + 'Api/Students/Get/' + uid
});
};
});
app.controller('ngGridCtrl', function ($scope,
ngGridService) {
$scope.students = null;
//Call services method in
Controller.
ngGridService.getStudents().then(function (resp) {
if (resp.data !==
undefined && resp.data !== null) {
$scope.students =
resp.data;
}
})
.finally(function () {
//TODO: If needed
anything else by you!
});
//This is custom template
used to display custom data.
var dateWithUpdatedBy =
'<div>{{row.entity.LastUpdateBy}},
{{row.entity.LastUpdateDate | date:"yyyy-MM-dd"}}</div>';
$scope.studentsColumns = [
{ field: 'MobileNo', displayName: 'MobileNo' },
{ field: 'StudentName', displayName: 'StudentName' },
{ field: 'Email', displayName: 'Contact Email'},
{
field: 'LastUpdateBy', displayName: 'Last Update'
cellTemplate:
dateWithUpdatedBy
}];
$scope.studentsGridView = {
data: 'students',
columnDefs: 'studentsColumns',
enablePaging: false,
showFooter: false,
sortable: true
};
});
</script>
</head>
<body ng-app="ngGridApp">
<div ng-controller="ngGridCtrl">
<div class="ngGridStyle" ng-grid="companyGridView"></div>
</div>
</body>
</html>
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
Blogger Comment
Facebook Comment