/// <reference path="../plugins/ng-grid-reorderable.js" /> /// <reference path="../ng-grid-1.0.0.debug.js" /> var plugins = {}; function userController($scope) { var self = this; $('body').layout({ applyDemoStyles: true, center__onresize: function (x, ui) { // may be called EITHER from layout-pane.onresize OR tabs.show plugins.ngGridLayoutPlugin.updateGridLayout(); } }); plugins.ngGridLayoutPlugin = new ngGridLayoutPlugin(); $scope.mySelections = []; $scope.mySelections2 = []; $scope.myData = []; $scope.filterOptions = { filterText: "", useExternalFilter: false, }; $scope.pagingOptions = { pageSizes: [250, 500, 1000], //page Sizes pageSize: 250, //Size of Paging data totalServerItems: 0, //how many items are on the server (for paging) currentPage: 1 //what page they are currently on }; self.getPagedDataAsync = function (pageSize, page, searchText) { setTimeout(function () { var data; if (searchText) { var ft = searchText.toLowerCase(); data = largeLoad().filter(function (item) { return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; }); } else { data = largeLoad(); } var pagedData = data.slice((page - 1) * pageSize, page * pageSize); $scope.myData = pagedData; $scope.pagingOptions.totalServerItems = data.length; if (!$scope.$$phase) { $scope.$apply(); } }, 100); }; $scope.$watch('pagingOptions', function () { self.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); }, true); $scope.$watch('filterOptions', function () { self.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); }, true); self.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); $scope.gridOptions = { data: 'myData', jqueryUITheme: false, jqueryUIDraggable: false, selectedItems: $scope.mySelections, showSelectionCheckbox: true, multiSelect: false, showGroupPanel: false, showColumnMenu: true, plugins: [plugins.ngGridLayoutPlugin], enablePaging: true, filterOptions: $scope.filterOptions, pagingOptions: $scope.pagingOptions, columnDefs: [{ field: 'name', displayName: 'Very Long Name Title', sortable: false}, { field: 'allowance', width: 120, aggLabelFilter: 'currency', cellTemplate: '<div ng-class="{red: row.entity[col.field] > 30}"><div class="ngCellText">{{row.entity[col.field] | currency}}</div></div>' }, { field: 'birthday', width: '120px', cellFilter: 'date', resizable: false }, { field: 'paid', width: '*', cellFilter: 'checkmark' }] }; };