I am new to AngularJS ui-grid, and a first time user of the exporter feature. I need to export ui-grid table,but the things i can able to export visible date without error but when i try to export All Date it's come with visible date only. How I can resolve this problem?
app.service('CRUDService', function ($http) {
//**********----Get Record----***************
this.getProducts = function (apiRoute) {
debugger
console.log(apiRoute);
return $http.get(apiRoute);
}
});var app;
(function () {
'use strict';
app = angular.module('UIGrid_App',
[
'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
'ui.grid.exporter' //data grid Export Data
]);
})();app.controller('ProductsCtrl', ['$scope', 'CRUDService', 'uiGridConstants',
function ($scope, CRUDService, uiGridConstants) {
$scope.gridOptions = [];
//Pagination
$scope.pagination = {
paginationPageSizes: [15, 25, 50, 75, 100, "All"],
ddlpageSize: 15,
pageNumber: 1,
pageSize: 15,
totalItems: 0,
getTotalPages: function () {
return Math.ceil(this.totalItems / this.pageSize);
},
pageSizeChange: function () {
if (this.ddlpageSize == "All")
this.pageSize = $scope.pagination.totalItems;
else
this.pageSize = this.ddlpageSize
this.pageNumber = 1
$scope.GetProducts();
},
firstPage: function () {
if (this.pageNumber > 1) {
this.pageNumber = 1
$scope.GetProducts();
}
},
nextPage: function () {
if (this.pageNumber < this.getTotalPages()) {
this.pageNumber++;
$scope.GetProducts();
}
},
previousPage: function () {
if (this.pageNumber > 1) {
this.pageNumber--;
$scope.GetProducts();
}
},
lastPage: function () {
if (this.pageNumber >= 1) {
this.pageNumber = this.getTotalPages();
$scope.GetProducts();
}
}
};
//ui-Grid Call
$scope.GetProducts = function () {
$scope.loaderMore = true;
$scope.lblMessage = 'loading please wait....!';
$scope.result = "color-green";
$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
if (col.filters[0].term) {
return 'header-filtered';
} else {
return '';
}
};
$scope.gridOptions = {
useExternalPagination: true,
useExternalSorting: true,
enableFiltering: true,
enableSorting: true,
enableRowSelection: true,
enableSelectAll: true,
enableGridMenu: true,
columnDefs: [
{ name: "ProductID", displayName: "Product ID", width: '10%', headerCellClass: $scope.highlightFilteredHeader },
{ name: "ProductTitle", title: "Product Title", width: '40%', headerCellClass: $scope.highlightFilteredHeader },
{ name: "Type", title: "Type", headerCellClass: $scope.highlightFilteredHeader },
{
name: "Price", title: "Price", cellFilter: 'number',
filters: [{ condition: uiGridConstants.filter.GREATER_THAN, placeholder: 'Minimum' }, { condition: uiGridConstants.filter.LESS_THAN, placeholder: 'Maximum' }],
headerCellClass: $scope.highlightFilteredHeader
},
{ name: "CreatedOn", displayName: "Created On", cellFilter: 'date:"short"', headerCellClass: $scope.highlightFilteredHeader },
{
name: 'Edit',
enableFiltering: false,
enableSorting: false,
width: '5%',
enableColumnResizing: false,
cellTemplate: '<span class="label label-warning label-mini">' +
'<a href="" style="color:white" title="Select" ng-click="grid.appScope.GetByID(row.entity)">' +
'<i class="fa fa-check-square" aria-hidden="true"></i>' +
'</a>' +
'</span>'
}
],
exporterAllDataFn: function () {
return getPage(1, $scope.gridOptions.totalItems, paginationOptions.sort)
.then(function () {
$scope.gridOptions.useExternalPagination = false;
$scope.gridOptions.useExternalSorting = false;
getPage = null;
});
},
};
var NextPage = (($scope.pagination.pageNumber - 1) * $scope.pagination.pageSize);
var NextPageSize = $scope.pagination.pageSize;
var apiRoute = 'api/Product/GetProducts/' + NextPage + '/' + NextPageSize;
var result = CRUDService.getProducts(apiRoute);
result.then(
function (response) {
$scope.pagination.totalItems = response.data.recordsTotal;
$scope.gridOptions.data = response.data.productList;
$scope.loaderMore = false;
},
function (error) {
console.log("Error: " + error);
});
}
//Default Load
$scope.GetProducts();
//Selected Call
$scope.GetByID = function (model) {
$scope.SelectedRow = model;
};
}
]);@{
ViewBag.Title = "Products";
}
<h3>Products with UI Grid</h3>
<div class="row">
<div class="col-md-12" ng-controller="ProductsCtrl">
<div ui-grid="gridOptions"
ui-grid-resize-columns
ui-grid-move-columns
ui-grid-exporter
ui-grid-selection
ui-grid-pinning class="grid"></div>
<div class="loadmore">
<div ng-show="loaderMore" ng-class="result">
<img src="~/Content/ng-loader.gif" />
{{lblMessage}}
</div>
</div>
<div role="contentinfo" class="ui-grid-pager-panel ng-scope">
<div role="navigation" class="ui-grid-pager-container">
<div role="menubar" class="ui-grid-pager-control">
<!-- Start Page -->
<button type="button" role="menuitem" class="ui-grid-pager-first" ui-grid-one-bind-title="aria.pageToFirst"
ui-grid-one-bind-aria-label="aria.pageToFirst"
ng-click="pagination.firstPage()"
ng-disabled="cantPageBackward()" title="Page to first" aria-label="Page to first"
disabled="disabled">
<div class="first-triangle">
<div class="first-bar"></div>
</div>
</button>
<!-- Prev Page -->
<button type="button" role="menuitem" class="ui-grid-pager-previous"
ui-grid-one-bind-title="aria.pageBack" ui-grid-one-bind-aria-label="aria.pageBack"
ng-click="pagination.previousPage()"
ng-disabled="cantPageBackward()" title="Page back" aria-label="Page back" disabled="disabled">
<div class="first-triangle prev-triangle"></div>
</button>
<input type="number" ui-grid-one-bind-title="aria.pageSelected" ui-grid-one-bind-aria-label="aria.pageSelected"
class="ui-grid-pager-control-input ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-min ng-valid-max ng-valid-required"
ng-model="pagination.pageNumber"
min="1" max="{{pagination.getTotalPages()}}" required="" title="Selected page"
aria-label="Selected page" disabled>
<span class="ui-grid-pager-max-pages-number ng-binding"
ng-show="pagination.getTotalPages() > 0">
<abbr ui-grid-one-bind-title="paginationOf" title="of"> /</abbr>{{pagination.getTotalPages()}}
</span>
<!-- Next Page -->
<button type="button" role="menuitem" class="ui-grid-pager-next" ui-grid-one-bind-title="aria.pageForward"
ui-grid-one-bind-aria-label="aria.pageForward"
ng-click="pagination.nextPage()"
ng-disabled="cantPageForward()"
title="Page forward" aria-label="Page forward">
<div class="last-triangle next-triangle"></div>
</button>
<!-- Last Page -->
<button type="button" role="menuitem" class="ui-grid-pager-last"
ui-grid-one-bind-title="aria.pageToLast" ui-grid-one-bind-aria-label="aria.pageToLast"
ng-click="pagination.lastPage()" ng-disabled="cantPageToLast()" title="Page to last" aria-label="Page to last">
<div class="last-triangle"><div class="last-bar"></div></div>
</button>
</div><!-- ngIf: grid.options.paginationPageSizes.length > 1 -->
<div class="ui-grid-pager-row-count-picker ng-scope" @*ng-if="pagination.ddlpageSize.length > 1"*@>
<select ng-model="pagination.ddlpageSize"
ng-options="o as o for o in pagination.paginationPageSizes" ng-change="pagination.pageSizeChange()"
class="ng-pristine ng-untouched ng-valid ng-not-empty"></select>
<span class="ui-grid-pager-row-count-label ng-binding"> items per page</span>
</div>
<!-- end ngIf: grid.options.paginationPageSizes.length > 1 -->
<!-- ngIf: grid.options.paginationPageSizes.length <= 1 -->
</div>
<div class="ui-grid-pager-count-container">
<div class="ui-grid-pager-count">
<span ng-show="pagination.totalItems > 0" class="ng-binding" style="">
{{pagination.pageNumber}}<abbr ui-grid-one-bind-title="paginationThrough" title="through"> - </abbr>{{pagination.ddlpageSize}} of {{pagination.totalItems}} items
</span>
</div>
</div>
</div>
<p>{{SelectedRow}}</p>
</div>
</div>
@section AngularScript{
<script src="~/ScriptsNg/Controllers/ProductsCtrl.js"></script>
<script src="~/ScriptsNg/Service/CRUDService.js"></script>
}
