Hi Katy,

The hidden property of the IgxColumnComponent is used to control hiding/showing of a column. For column moving, you are expected to use the moveColumn method exposed on the IgxGrid.

You can get the existing columns by reading the columns property of the grid:

const columns = this.grid.columns;
columns[1].hidden = true;
this.grid.moveColumn(columns[1], columns[3]

There is a better way to recreate the columns order, but again, it will work like the state directive itself - will restore much more column properties, than just what you need. See the implementation in the state.directive.ts file.

Is it rallly an issue for you if some other properties get restored too? Please provide some more details on your scenario (like what properties you don`t want to be restored) so I can suggest a better solution.

getState method uses JSON.stringify() method to convert the original objects to a JSON string. However, this does not support Functions, thats why the [IgxGridState] directive will ignore the columns formatter, filters, summaries, sortStrategy, cellClasses and cellStyles properties. It is up to the developer to keep track and restore those on application level. It is recommended to set these in the onColumnInit event:

I already have all the logic for columns in the html. So I don't want to have to rewrite all that into a onColumnInit event instead. So that is why I was trying to reinstate the things the user can change only so that I don't lose all that other information when restoring the state

e.g for one of my columns I have 

See this sample that I have prepared for you.

What it does is it extends the IgxGridState directive and subscribes to the onColumnInit event for the corresponding grid. This way, you save the burden of having to subcsribe to each of the many grids you have, rather than that - you do it once in the directive, and this directive is applied to each grid (as it is now, right ?)

In short, here is the summarized thing to do:

export class IgxGridStateExtendedDirective extends IgxGridStateDirective {
public template: TemplateRef<any>;
constructor(
    @Host() @Optional() protected currGrid: IgxGridComponent) {
        currGrid.onColumnInit.subscribe((column: IgxColumnComponent) => {
            onColumnInit(column, this.template);
        });
    }
}
  
export function onColumnInit(column: IgxColumnComponent, template: any) {
if (column.field === 'IsActive') {
    column.bodyTemplate = template;
}
}
  
export class GridSaveStateComponent implements OnInit, AfterViewInit {
    public restoreGridState() {
        this.state.template = this.isActiveTemplate;
        ...
    }
}
 

There are few more things to do, see them in the example. In short, from the component that holds your grid, you need to pass the templates/functions to the state directive, as it is done in the restoreGridState method. My example does it for one template, but you can do it for anything.

Please review it and let me know if you have any questions.

Hristo