How to dynamically configure ng-grid

S

5

12

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

Skell answered 23/8, 2013 at 14:49 Comment(0)

S

2

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>

Skell answered 28/8, 2013 at 8:10 Comment(2)

So how exactly can you now change gridoptions dinamically? I tried this way: plnkr.co/edit/FfnbLhgllUgysN8ZUJZP?p=preview but no luck for me. – Shapiro 10/6, 2014 at 9:1

@Shapiro 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 :-( – Nahshon 14/11, 2014 at 14:55

H

10

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>

Humanoid answered 23/8, 2013 at 14:53 Comment(1)

You're right, you can dynamically override the column definitions like this, but as I mentioned in the question, I need to vary multiple properties of the grid so I'm looking for a way to reassign the whole configuration object. – Skell 27/8, 2013 at 8:19

F

4

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;

Frenulum answered 16/12, 2013 at 23:43 Comment(2)

Where do you get $gridScope? – Nahshon 14/11, 2014 at 14:56

Thx! You made my day!! @Sebastian: you can get it on $scope.gridOptions(.$gridScope...) – Emaemaciate 18/11, 2014 at 12:0

S

2

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>

Skell answered 28/8, 2013 at 8:10 Comment(2)

So how exactly can you now change gridoptions dinamically? I tried this way: plnkr.co/edit/FfnbLhgllUgysN8ZUJZP?p=preview but no luck for me. – Shapiro 10/6, 2014 at 9:1

@Shapiro 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 :-( – Nahshon 14/11, 2014 at 14:55

S

1

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.

Streeter answered 17/9, 2015 at 13:25 Comment(1)

I am loading grid options from a JSON file, for me I did this.<div ng-if="gridOptions != undefined" ui-grid="gridOptions"></div> – Hamann 21/6, 2016 at 19:53

J

0

It is possible like the plnker that I edited for you: Here

Please notice when I played with it, not all options where live refreshing... But some where as you can see in the example.

Basically the solution is to have $scope variables assigned to the params of gridOptions.

Jestinejesting answered 23/8, 2013 at 16:15 Comment(1)

Its only updating the columndefs, multiselect is still enabled. – Nahshon 14/11, 2014 at 14:52

Recommended topics

Hot tags