Can't update filtering on igGrid

Question

I have two simple requirements

a) I need to programmatically change the number of columns displaying in igGrid
b) I need to programmatically update the filters in igGrid

I am under the impression that to change the number of columns programmatically you first need to 'destroy' the grid then recreate it.

To update the filters you just have to do this

grid.igGridFiltering("filter", ([{ fieldName: "Column1", expr: true, cond: "true" }]));

I always get this error when calling my code

cannot call methods on igGridUpdating prior to initialization; attempted to call method 'destroy'

Here is a code snippet

scope.changeView = function(v) {
    var grid = scope.element; //from directive 
    if (grid.data("igGrid") != null) {
        grid.igGrid('destroy');
    }
    updateGrid(grid, v);
};

function updateGrid(grid, v) {
    scope.gridOptions = coreFunctions.gridOptions(); //from service 
    scope.gridOptions.dataSource = scope.dataSource;
    var cols = JSON.parse(v.Json);
    cols = cols.fields;
    scope.gridOptions.columns = [];
    angular.forEach(cols, function(value, index) {
        scope.gridOptions.columns.push({ 'headerText': value, 'key': value, width: '200px' });
    });
    grid.igGrid(scope.gridOptions); //error occurs here! 
    grid.igGrid('dataBind');
    grid.igGridFiltering("filter", ([{ fieldName: "Column1", expr: true, cond: "true" }]));
}

Answer 1

You are right that you will need to destroy the widget and recreate it again using the new columns. Depending on the scenario it may be less painful to use the renderMultiColumnHeader method, which takes an array of columns as an argument. So this method will re-render the grid with the columns you have passed

Answer 2

I know this question is old, but I had this same issue and found the following to be a simple solution for (b):

Let's say you have this in your view

<div id="myGrid"></div>

and this in a script

$('#myGrid').igGrid({ ... grid options ... });

Infragistics then renders the widget inside of div#myGrid, including a table#myGrid_table descendant. This seems to be the element you need to specify to filter the grid.

That is, you want to call igGridFiltering on the table rendered by the igGrid widget, which will have the following id = id + '_table'. Assuming you have provided the filter myFilter in the correct format, this should work:

$('#myGrid_table').igGridFiltering("filter", myFilter);

As for (a), yes you do need to recreate the grid, update the columns, then recreate the grid.