var app = angular.module('plunker', ['ui.grid', 'ui.grid.infiniteScroll', 'ui.grid.selection','ui.grid.cellNav']);
var x;
angular.module('plunker').controller('ListController', ListController).directive('datafilter', function($compile) {
return {
restrict: 'EAC',
scope: {
data: '=',
totalData: '=totaldata',
searchdata: '=',
defaultinput: '=',
selectedrow: '&',
filterflag:'=',
totalFilterData:'='
},
link: function(scope, elem, attr) {
scope.pageNumber = 0;
var tempData = angular.copy(scope.totalData);
scope.totalPageLength = Math.ceil(scope.totalData.length / +attr.itemsperpage);
console.log(scope.totalData);
scope.data = scope.totalData.slice(0, attr.itemsperpage);
elem.on('scroll', function(event) {
event.preventDefault();
var scrollHeight = angular.element('#customTable').scrollTop();
/*if(scope.filterflag && scope.pageNumber != 0){
scope.data = scope.totalFilterData;
scope.pageNumber = 0;
angular.element('#customTable').scrollTop(0);
}*/
if (scrollHeight < 100) {
if(!scope.filterflag){
scope.scrollUp();
}
}
if (angular.element(this).scrollTop() + angular.element(this).innerHeight() >= angular.element(this)[0].scrollHeight) {
console.log("scroll bottom reached");
if(!scope.filterflag){
scope.scrollDown();
}
}
scope.$apply(scope.data);
});
elem.on('keyup', function(e) {
var pageNo;
var time = new Date().getTime();
console.log(scope.prevDate);
scope.defaultinput = "";
scope.filterflag = false;
if (scope.prevDate !== undefined) {
scope.prevDate = scope.prevDate == undefined ? new Date().getTime() : scope.prevDate;
if (new Date().getTime() - scope.prevDate > 1000) {
console.log("In true case");
scope.PrevKeyUpValue = undefined;
scope.prevDate = new Date().getTime();
scope.z = [];
} else {
scope.prevDate = new Date().getTime();
console.log("In else case");
clearTimeout(scope.timeInterval);
}
} else {
scope.prevDate = new Date().getTime();
scope.PrevKeyUpValue = undefined;
scope.z = [];
console.log("In undefined case");
}
scope.PrevKeyUpValue = scope.PrevKeyUpValue == undefined ? e.key : scope.PrevKeyUpValue + e.key;
scope.PrevKeyUpValue = scope.PrevKeyUpValue.replace("Enter", '');
var prev = scope.PrevKeyUpValue;
//Enter condition.
scope.enterChecktypeCondition = scope.PrevKeyUpValue && e.keyCode == 13;
scope.minChecktypeCondition = scope.PrevKeyUpValue && scope.PrevKeyUpValue.length > 3;
console.log(prev);
scope.timeInterval = setTimeout(function() {
scope.moveToPosition();
}, 500);
console.log(scope.timeInterval);
});
/*
* Scroll down data append function
*/
scope.scrollDown = function() {
if(scope.defaultinput == undefined || scope.defaultinput ==""){ //filter data append condition on scroll
scope.totalDataCompare = scope.totalData;
}else {
scope.totalDataCompare = scope.totalFilterData;
}
scope.totalPageLength = Math.ceil(scope.totalDataCompare.length / +attr.itemsperpage);
if (scope.pageNumber < scope.totalPageLength - 1) {
scope.pageNumber++;
scope.lastaddedData = scope.totalDataCompare.slice(scope.pageNumber * attr.itemsperpage, (+attr.itemsperpage) + (+scope.pageNumber * attr.itemsperpage));
scope.data = scope.totalDataCompare.slice(scope.pageNumber * attr.itemsperpage - 0.5 * (+attr.itemsperpage), scope.pageNumber * attr.itemsperpage);
scope.data = scope.data.concat(scope.lastaddedData);
scope.$apply(scope.data);
if (scope.pageNumber < scope.totalPageLength) {
var divHeight = $('.assign-list').outerHeight();
angular.element('#customTable').scrollTop(divHeight * 0.5 * (+attr.itemsperpage));
}
}
}
/*
* Scroll up data append function
*/
scope.scrollUp = function() {
if(scope.defaultinput == undefined || scope.defaultinput ==""){ //filter data append condition on scroll
scope.totalDataCompare = scope.totalData;
}else {
scope.totalDataCompare = scope.totalFilterData;
}
scope.totalPageLength = Math.ceil(scope.totalDataCompare.length / +attr.itemsperpage);
if (scope.pageNumber > 0) {
this.positionData = scope.data[0];
scope.data = scope.totalDataCompare.slice(scope.pageNumber * attr.itemsperpage - 0.5 * (+attr.itemsperpage), scope.pageNumber * attr.itemsperpage);
var position = +attr.itemsperpage * scope.pageNumber - 1.5 * (+attr.itemsperpage);
if (position < 0) {
position = 0;
}
scope.TopAddData = scope.totalDataCompare.slice(position, (+attr.itemsperpage) + position);
scope.pageNumber--;
var divHeight = $('.assign-list').outerHeight();
if (position != 0) {
scope.data = scope.TopAddData.concat(scope.data);
scope.$apply(scope.data);
angular.element('#customTable').scrollTop(divHeight * 1 * (+attr.itemsperpage));
} else {
scope.data = scope.TopAddData;
scope.$apply(scope.data);
angular.element('#customTable').scrollTop(divHeight * 0.5 * (+attr.itemsperpage));
}
}
}
/*
* Move to given position function
*/
scope.moveToPosition = function() {
//if(scope.enterChecktypeCondition){
var prev = scope.PrevKeyUpValue,
searchTempData = [],
tempSearch;
scope.searchdata = prev;
this.enableflag = true;
if (prev.length > 0) {
scope.firstEleSearch = tempData.filter(function(a, i) {
if (a.col2.toLowerCase().startsWith(prev.substring(0, 1).toLowerCase())) {
return a
}
});
scope.z = scope.firstEleSearch;
}
//scope.prevDate = undefined;
if (scope.z.length == 0) {
scope.z = tempData.filter(function(a, i) {
if (a.col2.toLowerCase().startsWith(prev.toLowerCase())) {
return a
}
});
} else {
scope.z = scope.z.filter(function(a, i) {
if (a.col2.toLowerCase().startsWith(prev.toLowerCase())) {
return a
}
});
}
if (scope.z.length == 0) {
scope.PrevKeyUpValue = undefined;
scope.prevDate = undefined;
scope.z = scope.firstEleSearch;
/*
* Display previously matched data
*/
for (var j = 0; j < prev.length; j++) {
tempSearch = prev.substring(0, prev.length - (j + 1))
searchTempData = scope.z.filter(function(a, i) {
if (a.col2.toLowerCase().startsWith(tempSearch.toLowerCase())) {
return a;
}
});
if (searchTempData.length > 0) {
scope.z = searchTempData;
break;
}
}
}
if (scope.z[0] && this.enableflag) {
/*
* calculate pageNo , position from the index.
*/
this.rawQuotient = scope.z[0].index / +attr.itemsperpage;
this.remainder = this.rawQuotient % 1;
this.pageNo = this.rawQuotient - this.remainder;
this.position = scope.z[0].index % +attr.itemsperpage;
if (this.pageNo != 0)
this.position = this.position + 0.5 * attr.itemsperpage;
var divHeight = $('.assign-list').outerHeight();
scope.selectedrow({
row: scope.z[0],
index: scope.z[0].index
});
/*
* Move to page depending on the page and scroll to given entity.
*/
if (this.pageNo != scope.pageNumber + 1 || this.position > 0.5 * attr.itemsperpage) {
scope.pageNumber = this.pageNo - 1;
scope.scrollDown();
scope.$apply(scope.data);
angular.element('#customTable').scrollTop(divHeight * this.position)
$('.assign-list')[this.position].focus();
} else if (this.pageNo == scope.pageNumber + 1) { // scroll to given entity in same page.
angular.element('#customTable').scrollTop(divHeight * 2 * this.position);
$('.assign-list')[2 * this.position].focus();
}
}
if (scope.z.length !== 0) {
var divHeight = $('.assign-list').outerHeight();
}
}
scope.$watch('filterflag', function(value) {
if(value){
scope.pageNumber = 0;
angular.element('#customTable').scrollTop(0);
scope.selectedrow({
row: scope.data[0],
index: scope.data[0].index
});
scope.data = scope.totalFilterData.length > +attr.itemsperpage ? scope.totalFilterData.slice(0, attr.itemsperpage) : scope.totalFilterData ;
setTimeout(function(){
$('.assign-list')[0].focus();
scope.filterflag = false;
},100);
}
});
}
};
});
ListController.$inject = ['$scope', '$timeout', '$q', '$templateCache'];
function ListController($scope, $timeout, $q, $templateCache) {
var grid=this;
grid.config={"itemsPerPage":"200","maxPage":"5","lastPage":"0","type":"radio","multiSelect":true,"sorting":"true","columnDefs":[{"field":"sno","name":"sno"},{"field":"id","name":"ID"},{"field":"name","name":"My Name"}]};
grid.loadMoreData = loadMoreData;
grid.searchFn = searchFn;
grid.getProductList = getProductList;
$scope.itemsPerPage = grid.config.itemsPerPage;
$scope.lastPage = grid.config.lastPage
$scope.maxPage = grid.config.maxPage
$scope.data = [];
var request = {
"startAt": "1",
"noOfRecords": grid.itemsPerPage
};
$scope.gridOptions = {
infiniteScrollDown: true,
enableSorting: grid.config.sorting,
enableRowSelection: true,
enableSelectAll: true,
//enableFullRowSelection: true,
columnDefs: [{"field":"sno","name":"sno"},
{"field":"id","name":"ID"},
{"field":"name","name":"My Name",
cellTemplate: '<div ng-keyup="grid.appScope.addClass(row,col)">{{row.entity[col.field]}}</div>'
}],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
gridApi.infiniteScroll.on.needLoadMoreData($scope, grid.loadMoreData);
}
};
$scope.addClass =function(row){
console.log(row);
alert("hai");
}
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\" ><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"row.isSelected\" ng-click=\"row.isSelected=!row.isSelected;selectButtonClick(row, $event)\"> </div>"
);
$templateCache.put('ui-grid/selectionSelectAllButtons',
"<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-all-selected': grid.selection.selectAll}\" ng-if=\"grid.options.enableSelectAll\"><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" ng-model=\"grid.selection.selectAll\" ng-click=\"grid.selection.selectAll=!grid.selection.selectAll;headerButtonClick($event)\"></div>"
);
$scope.gridOptions.multiSelect = true;
$scope.makeid = function() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
function searchFn() {
var a = $scope.search;
var positionArray=[];
x = $scope.searchData;
var y= $scope.gridApi.grid.rows.filter(function(arr, y) {
//contains arr.entity.name.indexOf(a) > -1
if(arr.entity.name.startsWith(a))
{
positionArray.push(y);
}
return arr.entity.name.startsWith(a);
});
y=positionArray;
$timeout(function() {
if($scope.gridApi && $scope.gridApi.grid.rows[y[0]])
$scope.gridApi.cellNav.scrollToFocus($scope.gridApi.grid.rows[y[0]].entity,2);
//$scope.gridApi.grid.modifyRows($scope.gridOptions.data);
$scope.gridApi.selection.clearSelectedRows();
if(y.length != $scope.data.length){
for(i=0;i<y.length;i++)
{
$scope.gridApi.selection.selectRow($scope.gridOptions.data[y[i]]);
}
}
}, 100);
}
function loadMoreData() {
var promise = $q.defer();
if ($scope.lastPage < $scope.maxPage) {
$timeout(function() {
var arrayObj = [];
for (var i = 0; i < $scope.itemsPerPage; i++) {
arrayObj.push({
sno: i + 1,
id: Math.random() * 100,
name: $scope.makeid()
});
}
if (true) {
$scope.lastPage++;
$scope.data = $scope.data.concat(arrayObj);
$scope.gridApi.infiniteScroll.dataLoaded();
$scope.gridOptions.data=$scope.data;
// console.log($scope.data);
$scope.searchData = $scope.data;
// $scope.data = $scope.searchData;
promise.resolve();
}
}, Math.random() * 1000);
} else {
$scope.gridApi.infiniteScroll.dataLoaded();
promise.resolve();
}
return promise.promise;
}
grid.loadMoreData();
function getProductList() {
if ($scope.gridApi.selection.getSelectedRows().length > 0) {
//$scope.gridOptions.data = $scope.resultSimulatedData;
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows(); //<--Property undefined error here
console.log($scope.mySelectedRows);
//alert('Selected Row: ' + $scope.mySelectedRows[0].id + ', ' + $scope.mySelectedRows[0].name + '.');
} else {
alert('Select a row first');
}
}
$scope.getSelectedRows = function() {
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
}
$scope.headerButtonClick = function() {
$scope.selectAll = $scope.grid.selection.selectAll;
}
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" data-semver="1.3.20"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ListController as grid">
<div class="input-group" style="margin-bottom: 15px">
<div class="input-group-btn">
<button class='btn btn-primary' ng-click="grid.searchFn()">Click</button>
</div>
<input class="form-control" ng-model="search" >
</div>
<div data-ui-grid="gridOptions" class="grid" ui-grid-selection data-ui-grid-infinite-scroll ui-grid-cellNav style="height :360px"></div>
<button ng-click="grid.getProductList()">Submit</button>
</body>
</html>
/* Put your css in here */
.red { color: red; background-color: yellow !important; }
.blue { color: blue; }