Script Part:-
<script type="text/javascript">
//Module
var app = angular.module('DesignationApp', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.pagination', 'ui.grid.selection']);
//Controller
app.controller('DesignationCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.regionForm = true;
$scope.regionData = null;
var paginationOptions = {
pageNumber: 1,
pageSize: 2,
sort: null
};
$scope.designation = {
vcDsgCode: "",
vcDsgName: "",
vcDsgDesc: ""
}
$scope.clear = function () {
$scope.designation.vcDsgCode = '',
$scope.designation.vcDsgName = '',
$scope.designation.vcDsgDesc = ''
//,
//$scope.addnewdiv = false;
//$scope.updatediv = false;
};
$scope.gridOptions = {
paginationPageSizes: [1, 2, 3, 4, 5],
paginationPageSize: 2,
useExternalPagination: true,
useExternalSorting: true,
enableColumnMenus: true, //Remove Column menus like ascending, descending, etc.
enableSorting: true, //enable sorting for grid
enableFiltering: true, //enable giltering for grid
//enableHiding: false, //remove hide column options from grid column
//enable hide column options require for each column
columnDefs: [
{ field: 'index', displayName: 'Id', width: '5%' },
//{name: 'seq', field: 'name', displayName: 'Id', cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>', width: '5%'},
{ field: 'inDsgId', visible: false }, //hiding autoIncrement column
{
field: 'vcDsgCode', displayName: 'Code', width: '20%', enableHiding: false,
filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-modal></div></div>'
},
{ field: 'vcDsgName', displayName: 'Name', width: '20%', enableFiltering: false, enableHiding: false },
//enableSorting: false, enable Sorting remove sort Options
{
field: 'vcDsgDesc', displayName: 'Description', width: '20%', enableHiding: false,
menuItems: [{
title: 'Grid Id',
action: function () {
alert('Grid ID: ' + this.grid.id);
}
}],
},
],
//pAGINATION
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
//$scope.gridApi.core.refresh()
$scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};
var getPage = function () {
var url;
switch (paginationOptions.sort) {
case uiGridConstants.ASC:
url = "@Url.Action("GetDesignationList", "Designation")";
break;
case uiGridConstants.DESC:
url = "@Url.Action("GetDesignationList", "Designation")";
break;
default:
url = "@Url.Action("GetDesignationList", "Designation")";
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = data.length;
$scope.gridOptions.data = data;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
angular.forEach(data, function (data, index) { //Adding index column in grid
data["index"] = index + 1
});
$scope.divRegion = true;
});
};
getPage();
}])
</script>
Mvc Code:-
<body id="body">
<div class="panel-body" style="float:left">
@Html.ActionLink("Create New", "AddEditRecord", "Designation", null, new { data_modal = "", id = "openDialog", @class = "btn btn-small btn-primary pull-right" })
</div>
<div class="row" ng-controller="DesignationCtrl">
<div class="col-md-11">
<div class="panel panel-primary">
<div class="panel-heading">
<h style="text-align: left; font-weight: bold">Designation</h>
</div>
<div>
<div class="panel-body">
<div class="table-responsive">
<div ui-grid="gridOptions" ui-grid-pagination
ui-grid-pinning class="grid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>