How to dynamically configure ng-grid

27,644

Solution 1

Found a nice solution to this on the angular forum. Essentially, if an array of config objects is maintained, individual elements can be passed to the ng-grid directive as in the markup above. Plunker illustrating solution here: http://plnkr.co/edit/TDGKRo?p=preview

var gridOptions1 = {
    data: 'myData',
    columnDefs: [
        { field:"name", displayName: "NAME"},
        { field:"age", displayName: "AGE"}],
    multiSelect: true,
    selectedItems: $scope.selected
};

var gridOptions2 = {
    data: 'myData',
    columnDefs: [
        { field:"name", displayName: "Name"},
        { field:"age", displayName: "Age"}],
    multiSelect: false,
    selectedItems: $scope.selected
};

$scope.filterTabs = [{grid: gridOptions1}, {grid: gridOptions2}];

<ol>
    <li ng-repeat="tab in filterTabs">
        <div class="gridStyle" ng-grid="tab.grid"></div>                        
    </li>
</ol>

Solution 2

It looks like you can do it if you assign columnDefs to a string of a property on the $scope and then change the array: http://plnkr.co/edit/wuob1M?p=preview;

It is described in this issue raised on ng-grid.

JS:

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {

    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];

    $scope.columnDefs1 = [{ field:"name", displayName: "NAME"},
                                   { field:"age", displayName: "AGE"}];


    $scope.columnDefs2 = [{ field:"name", displayName: "Name"},
                                   { field:"age", displayName: "Age"}];                               


    $scope.gridOptions = { data: 'myData',
                       columnDefs: 'columnDefs1',
                       multiSelect: true };

    $scope.switchColumnDefs = function() {

        $scope.columnDefs1 = $scope.columnDefs2;



    }

});

HTML:

<body ng-controller="MyCtrl">
        <label>Show me:</label>
        <a ng-click="switchColumnDefs()">Switch Options</a>
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>

Solution 3

Just thought I'd share that if anyone is interested in changing from Single Select to MultiSelect it can be done dynamically like so:

$gridScope.selectionProvider.multi = true / false;

Solution 4

Another way to do this is to just stick in something like:

<div ng-grid="gridOptions" ng-if="refresh"></div>

Then just flip refresh to off, update the grid config, then back to on in two different refresh cycles.

View more solutions

27,644

Paul Taylor

.NET Core, ASP.NET, MVC, WebAPI, React, Angular, Entity Framework, Elasticsearch and SQL Server

Updated on July 14, 2022

Comments

Paul Taylor over 1 year

I have a view in an angularjs application in which I want to allow the user to select between various differently configured grids. Ideally I would like to bind the value passed to the ng-grid directive to a model variable, as illustrated below. However, although this example renders markup that works when a simple string value is passed to ng-grid (ie. <div class="gridStyle" ng-grid="gridOptions1"></div>, dynamic configuration fails.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.option;
    $scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];

    $scope.gridOptions1 = { data: 'myData',
                       columnDefs: [{ field:"name", displayName: "NAME"},
                                   { field:"age", displayName: "AGE"}],
                       multiSelect: true };

    $scope.gridOptions2 = { data: 'myData',
                       columnDefs: [{ field:"name", displayName: "Name"},
                                   { field:"age", displayName: "Age"}],
                       multiSelect: false };

});

<body ng-controller="MyCtrl">
    <label>Show me:</label>
    <input type="radio" name="option" ng-model="option" value="gridOptions1">Grid A</input>
    <input type="radio" name="option" ng-model="option" value="gridOptions2">Grid B</input>
    <div class="gridStyle" ng-grid="{{option}}"></div>
</body>

Can anyone tell me please if there is a way of getting ng-grid to accept a different configuration dynamically, or if there is a workaround to this limitation? Please note that I need to reconfigure multiple properties of the grid, not just the columnDefs and data properties for which I believe there are workarounds.

Plunker: http://plnkr.co/edit/mdXrq6?p=preview

Clem over 9 years

So how exactly can you now change gridoptions dinamically? I tried this way: plnkr.co/edit/FfnbLhgllUgysN8ZUJZP?p=preview but no luck for me.
Sebastian almost 9 years

Its only updating the columndefs, multiselect is still enabled.
Sebastian almost 9 years

@Clem you can't. It's just the columndefs or data which is recognized by the grid and act different. e.g. multiselect will only be enabled or disabled while the initialization of nggrid :-(
Sebastian almost 9 years

Where do you get $gridScope?
mettjus almost 9 years

Thx! You made my day!! @Sebastian: you can get it on $scope.gridOptions(.$gridScope...)
Ryan Pelletier over 7 years

I am loading grid options from a JSON file, for me I did this.<div ng-if="gridOptions != undefined" ui-grid="gridOptions"></div>