Angularjs ng-grid : how to save and reload layout config ?

[Aaron Brooke]

Hi All,

Please forgive the noob.  I just found ng-grid today ;)

Currently I'm trying to figure out how I can save the current layout configuration so that the next time I log in I can display the grid in exactly the same way as when I left it.

E.G.

User loads the page

Selects which columns to display

Changes the width of the columns

Changes the order of the columns

User clicks a button to 'save' the current layout configuration.

The next day the person clicks on the link to the page

The server looks up the users last saved layout configuration

The grid is configured with the saved layout configuration.

The user essentially sees the grid in the same layout configuration as they did previously

My question is.... how do I get to the layout config????

I have tried the following but it just returns the initial configuration, not the current configuration.

http://plnkr.co/edit/NqcGTY?p=preview

[alexulq]

You are having the same issue as my. I posted something similar here:

https://groups.google.com/forum/#!topic/angular/malCQ9mqFFI

The problem is that the column menu works on the internal grid columns, not on your column definition. 

What I did was to intercept the changing of the column event:

$scope.$on('ngGridEventColumns', function (newColumns) {

                //do work here to save the column information.

                console.log('Columns changed');

                console.log(newColumns.targetScope.columns);

               

                $scope.updateGridLayoutOnServer(newColumns);

            });

And then do a manually sync of the confiuration:

$scope.updateGridLayoutOnServer = function (newColumns) {

                var mustUpdate = false;

                angular.forEach($scope.columnsOptions, function (column, index) {

                    if (column.visible !== newColumns.targetScope.columns[index].visible)

                    {

                        mustUpdate = true;

                        column.visible = newColumns.targetScope.columns[index].visible;

                    }

                });

                

                if (mustUpdate) {

                    var newLayout = { columns: $scope.columnsOptions };

                    Service.updateGridLayout(newLayout); // send the new layout to the persistence store

                };

            };

You also have to add the visible property to your column options:

columnDefs: [

            { field:"name", displayName: "NAME", width: "140", visible: true},

            { field:"age", displayName: "AGE", width: "**", visible: true}]

[Aaron Brooke]

Thank you alexulq

[Aaron Brooke]

Just a follow up on alexulq's post, here is the list of events you can listen for 

https://github.com/angular-ui/ng-grid/wiki/Grid-Events

On Wednesday, 18 September 2013 21:26:28 UTC+10, Aaron Brooke wrote:

Thank you alexulq