If the options of ng-grid changes, ng-grid will not apply it

[freewind]

I want to configure the ng-grid on runtime, but it won't apply to ng-grid.

See this demo: http://plnkr.co/edit/Dk2eFA?p=preview

In the modal, when I click the change grid options button, I replaced original data source, but nothing happens.

And also some other options e.g. columnDefs, I hope I can modify it and reflect it to ng-grid immediatly, because it's useful for a "grid designer" with ng-grid.

[orneryd]

yeah, the grid options is not meant to be overridden. You can do it this way:
http://plnkr.co/edit/YvFdHR?p=preview

    $scope.changeGridOptions = function() {
      $scope.myData = $scope.myData2;
    }

[freewind]

Is there any way to apply a changed grid options? I really need it.

I provide a simple ui designer to let user configure the columns, the gridOptions.columnDefs will change, but it can't be reflected to the grid

[orneryd]

You can by putting the column definitions on the scope and pass the string name of the variable like this:

columnDefs: 'myDefs'

If you reassign the definitions to a new coldef array then the grid will update.

[orneryd]

Just don't reassign the gridOptions and you'll be fine, reassign the references that you assign to the options instead.

[freewind]

Thank you, let me try

[freewind]

I defined a columnDefs for $scope:

   $scope.columnDefs = [{
        field: 'title',
        displayName: 'YYY'
    }];
    $scope.gridOptions = {
        data: dataName,
        columnDefs:  'columnDefs'
    }

Later I changed the $scope.columnDefs:

$scope.columnDefs.push({
field: 'name',
displayName: 'NNN'
});

But the grid doesn't add the new column.

[orneryd]

Don't push, reassign the entire array. Push/pop/splice is currently not
supported on the columndefs. We may add that here soon.

On Monday, February 4, 2013, freewind wrote:

I defined a columnDefs for $scope:

$scope.columnDefs = [{
field: 'title',
displayName: 'YYY'
}];
$scope.gridOptions = {
data: dataName,
columnDefs: 'columnDefs'
}

Later I changed the $scope.columnDefs:

$scope.columnDefs.push({
field: 'name',
displayName: 'NNN'
});

But the grid doesn't add the new column.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/128#issuecomment-13116222.

-Tim Sweet

[freewind]

It works now, thank you so much!

[freewind]

There is a very easy solution to support push/pop/splice.

Find:

if (typeof options.columnDefs == "string") {
    $scope.$parent.$watch(options.columnDefs, function(a) {
        $scope.columns = [];
        grid.config.columnDefs = a;
        grid.buildColumns();
        grid.eventProvider.assignEvents();
        domUtilityService.RebuildGrid($scope,grid);
    });
} else {
    grid.buildColumns();
}

Add a true to the $watch as the 3rd parameter:

    $scope.$parent.$watch(options.columnDefs, function(a) {
        $scope.columns = [];
        grid.config.columnDefs = a;
        grid.buildColumns();
        grid.eventProvider.assignEvents();
        domUtilityService.RebuildGrid($scope,grid);
    }, true);

Angular will deep watch the array and the item's properties. Is it available?

[freewind]

I'm afraid you missed my last comment :)

[Siyfion]

@timothyswt I think push/pop/splice support would be a really nice addition to have... Perhaps it should also be made clear in the documentation that it isn't supported currently, as it's only after an hour of me scratching my head that I've found this!

[dotcom9]

+1 for dynamic grid configuration. I know the columnDefs and data properties can be reassigned (in a bit of a strange way). But there are many other properties that I need to rconfigure (eg. rowTemplate) and I can find no way of doing so.

Essentially, I would like to be able to pass a different configuration variable name to the ng-grid directive and have it update its layout accordingly. Or even to assign a different config object in the controller. At present it seems that neither option works.

[jan-molak]

Hi Tim and thanks for your excellent work on this plugin!

It might be worth pointing out that when programatically creating columnDefs for a grid with enableColumnResize set to true you also need to add the index and width attributes to the column definition. Otherwise if you change the width of a column and then reload the columnDefs no data will be displayed.

In the @freewind's example above this would mean adding the following:

columnDefs.push({
    field: 'name',
    displayName: 'NNN',
    index: columnIndex,   // where columnIndex is 0, 1, 2, 3, etc.
    width: "*"
});

$scope.myColumnDefs = columnDefs;

Hope this helps other folks who stumble upon this issue :)