Post
Ask Question
Ajaykumar Singh

Ajaykumar Singh

  • NA
  • 84
  • 6k

i am try to use ui-grid but i am totally confused

Oct 15 2016 5:31 AM
@{
ViewBag.Title = "ViewRegion";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="regionApp">
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>View Region</title>
<!--Angular References-->
<script src="~/scripts/angular.min.js"></script>
<script src="~/scripts/angular-route.min.js"></script>
<script src="~/scripts/angular-touch.min.js"></script>
<script src="~/scripts/angular-animate.min.js"></script>
<!--Ui Grid -->
<script src="~/scripts/ui-grid.min.js"></script>
<!--Export UiGrid References-->
<!--App Angular References-->
<link href="~/Content/assests/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/assests/css/style.css" rel="stylesheet" />
<!--ui Grid Style Reference-->
<link href="~/Content/ui-grid.min.css" rel="stylesheet" />
</head>
<body>
@using (Html.BeginForm())
{
<div ng-controller="RegionCtrl">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 style="text-align: left; font-weight: bold">Regions</h4>
</div>
<div class="panel-body">
<div class="gridStyle" ui-grid="gridOptions"></div>
</div>
</div>
</div>
}
</body>
</html>
@section scripts{
<script type="text/javascript">
//Module
//Module.js
var RegionApp = angular.module('regionApp',
['ngAnimate', // support for CSS-based animations
'ngTouch', //for touch-enabled devices
'ui.grid', //data grid for AngularJS
'ui.grid.pagination', //data grid Pagination
'ui.grid.resizeColumns', //data grid Resize column
'ui.grid.moveColumns', //data grid Move column
'ui.grid.pinning', //data grid Pin column Left/Right
'ui.grid.selection', //data grid Select Rows
'ui.grid.autoResize', //data grid Enabled auto column Size
]);
//Controller
app.controller('RegionCtrl', function ($scope, $http) {
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [1, 2, 3, 4, 5],
pageSize: 5,
currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.myData = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get("@Url.Action("GetRegionList", "Region")").success(function (largeLoad) {
data = largeLoad.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
$http.get("@Url.Action("GetRegionList", "Region")").success(function (largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}
}, 100);
};
// Watch for page and page size changes, re-fill the grid using the new options when they change
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch(
function () {
return {
currentPage: $scope.pagingOptions.currentPage,
pageSize: $scope.pagingOptions.pageSize
};
},
function (newVal, oldVal) {
// Reset to page 1 when the page size changes
if (newVal.pageSize !== oldVal.pageSize) {
$scope.pagingOptions.currentPage = 1;
}
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
},
true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
var colDefs = [
{ field: 'vcRgnCode', name: 'Code', headerCellTemplate: 'filterHeaderTemplate.html' },
{ field: 'vcRgnName', name: 'Name' },
{ field: 'vcRgnDesc', name: 'Description' }
]
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
//enableRowSelection: false,
};
});
</script>
}

Answers (2)