Is paging and columnResizing not working in ui-grid v3.0.0-rc.11
Solution 1
Well for column resizing, thanks to this link
http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/
apparently you have to add 'ui.grid.resizeColumns' as a dependency into your app module, and just use the ui-grid-resize-columns tag in the div (as I am doing)...
I removed the code
$scope.productGridOptions.enableColumnResizing = true;
And column resizing is working now....
Now on to paging.
Regards
i
Solution 2
Column resizing is working well for me. I had to add to add 'ui.grid.resizeColumns' as a dependency:
angular.module('app', ['ngRoute', 'ngResource', 'ui.bootstrap', 'ui.grid', 'ui.grid.resizeColumns'])
Then in your html you add the ui-grid-resize-columns class:
<div class="grid" ui-grid="gridOptions" ui-grid-resize-columns></div>
And finally in your controller you set enableColumnResizing to true in gridOptions:
$scope.gridOptions = {
data: 'data.data',
enableSorting: true,
enableColumnResizing: true
}
Hope that it finally works for you.
Extra info at: angular-ui-grid column resizing
Solution 3
I can't speak for earlier versions, but in ui-grid version 3.1.1 it is sufficient to add the ui.grid.resizeColumns dependency to your module and set enableColumnResizing = true in gridOptions. It's not necessary to add the ui-grid-resize-columns attribute to the div tag.
smackenzie
Updated on June 21, 2022Comments
-
smackenzie about 2 years
I can't seem to get any paging or column re-sizing working in the new ngGrid (ui-Grid) rc build v3.0.0-rc.11. It should be really straight forward according to this example: http://ui-grid.info/docs/#/tutorial/401_AllFeatures
For my main div, if I do this:
<div ui-grid="productGridOptions" ui-grid-resize-columns class="uiGridProducts">
and in my controller do this:
$scope.productGridOptions={}; $scope.productGridOptions.enableColumnResizing = true; $scope.productGridOptions.enableFiltering = false; $scope.productGridOptions.enablePaging = true; $scope.productGridOptions.pagingOptions = { pageSizes: [250, 500, 1000], pageSize: 250, currentPage: 1 }; $scope.productGridOptions.rowIdentity = function(row) { return row.id; }; $scope.productGridOptions.getRowIdentity = function(row) { return row.id; }; $scope.productGridOptions.data = 'products'; //The options for the data table $scope.productGridOptions.columnDefs = [ { name:'ID', field: 'id' }, { name:'Product', field: 'productName' }, { name:'Active Ing.', field: 'activeIngredients'}, { name:'Comments', field: 'comments' } ]; prProductService.getProducts().then(function(products) { $scope.products = products; });
Neither paging or column resizing work. There are no paging examples on the ui-grid tutorial, so assume it is similar to ngGrid, but its column resizing which I really need at the moment.
Regards
i
-
smackenzie over 9 yearsThis is similar to my own answer. I appreciate it.
-
Kon almost 8 yearsThis solved my problem, thanks. I was looking at ui-grid.info/docs/#/api/… which suggests using
ui-grid-column-resizer
attribute, but your suggesting ofui-grid-resize-columns
attribute worked for me.