Is paging and columnResizing not working in ui-grid v3.0.0-rc.11

Question

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

Captivate

Answer 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

Captivate

This solved my problem, thanks. I was looking at ui-grid.info/docs/#/api/… which suggests using ui-grid-column-resizer attribute, but your suggesting of ui-grid-resize-columns attribute worked for me. – Shirleyshirlie

Answer 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

Dressage

This is similar to my own answer. I appreciate it. – Captivate

Answer 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.

Alodie

Answer 4

I think pagination was added in v3.0.0-rc.12, but i'm not sure about that. Just search in the source file for pagination.

For handling pagination see this answer:

Angular ui-grid tables, client side pagination and scrolling

There is also an example in the ui-grid-Tutorial:

http://ui-grid.info/docs/#/tutorial/214_pagination

Invigorate