Introduction
In this article i will try to show the sample grid in AngularJS and adding the button in each row to get the selected row details. I will use the same sample Web API service created in my previous article.
Practical Approach
Below is the screenshot of the sample project created -
Now lets move on to each file in the project -
<!doctype html>
<html>
<head>
<title> Grid Example </title>
</head>
<body ng-app="myApp">
<div class="page-content">
<div class="row">
<div class="col-md-2">
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li>
<a href="#/GridExample" <i class="glyphicon glyphicon-home"></i> Grid Example</a>
</li>
</ul>
</div>
</div>
<div class="col-md-10">
<div class="content-box-header panel-heading">
<div class="panel-title">Sample Grid Example</div>
</div>
<div class="row">
<div class="col-md-12 panel-info">
<div class="content-box-large box-with-header">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Libaries for Bootstrap for controls -->
<!--Starts Here-->
<link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="scripts/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"></script>
<!--Ends Here-->
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.js"></script>
<link href="css/styles.css" rel="stylesheet" />
<link href="content/ui-grid/ui-grid-unstable.css" rel="stylesheet" />
<link href="content/css/custom.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/ui-grid-unstable.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
<script src="services/sampleService.js"></script>
<script src="controllers/sampleController.js"></script>
</body>
</html>
Above "index.html" has the references for controllers, services and stylesheet files. Library - "ui-grid-unstable.js" is used for loading the grid and it has functions required by the grid and stylesheet file also highlighted above.
If you checked my article it has all these files created already but in this example i will modify the controller part but service will be untouched.
So controller code for loading the grid -
myApp.controller('sampleCtrl', ['$scope', '$http', 'sampleService', function ($scope, $http, sampleService) {
var products = sampleService.getProducts();
products.then(function (response) {
$scope.gridOptions = {
data: response.data
};
});
$scope.getProdName = function (row) {
alert(row.entity.ProductName);
};
$scope.gridOptions = {
enableFiltering: false,
enablePaging: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
columnDefs: [
{ name: 'Product Id', field: 'ProductId', width: 150 },
{ name: 'Product Name', field: 'ProductName' },
{
name: 'Details',
cellTemplate: '<button class="btn btn-info btn-xs"
ng-click="grid.appScope.getProdName(row)">View Product Name</button>',
enableFiltering: false,
enableSorting: false
}
]
};
}]);
For grid to work we should add the dependency while registering a module -
var myApp = angular.module('myApp', ['ngRoute', 'ui.grid']);
Below is the screenshot of the working example -
Hope this helps.
No comments:
Post a Comment
Comments Section