ngAfterViewInit(): void {
        // Reordering columns can fail if done before the current Angular digest cycle is complete,
        // therefore, set timeout with 0 seconds so that it fires immediately after the digest cycle:
        setTimeout(() => {
            this.restoreColumnsFromCache(this.StorageName);
        });
        this.subscribeToColVisibilityChange();
    }
	
	public subscribeToColVisibilityChange(): void {
        this._colVisibilityChangeSub = this.grid.columnVisibilityChange.subscribe(
            ($event: ColumnVisibilityChangeEvent) => {
                this.cacheColumnsState(
                    {
                        changedColumns: $event.columns
                    },
                    this.StorageName
                );
            }
        );
    }
	
	public restoreColumnsFromCache(storageName: string): void {
        this._suppressReorderHandler = true;
        const columns = localStorage.getItem(storageName);
        if (columns) {
            // Column reordering is buggy when hidden columns exist.
            // Show all columns until we're done reordering:
            this.grid.columns.forEach(c => c.hidden = false);

            setTimeout(() => {
                // Reorder columns:
                const columnsParsed: ColumnInfo[] = JSON.parse(columns);
                columnsParsed.forEach((ci: ColumnInfo, index: number) => {
                    const gridColumn = this.grid.columns.find((gridCol: any) => gridCol.title === ci.title);
                    if (gridColumn) {
                        this.grid.reorderColumn(gridColumn, index);
                    }
                });

                // Restore column hidden states:
                this.grid.columns.forEach(c => {
                    const cachedColumn = columnsParsed.find(cachedCol => cachedCol.title === c.title);
                    c.hidden = cachedColumn ? !cachedColumn.isVisible : false;
                });

                this._suppressReorderHandler = false;
            });
        } else {
            this._suppressReorderHandler = false;
        }
    }

(dataStateChange)="dataStateChange($event)"

<kendo-grid-column-chooser (dataStateChange)="dataStateChange($event)" class="pull-right"></kendo-grid-column-chooser>

            <kendo-sparkline [chartArea]="{background: ''}"
              style="width:30px; height:30px;"
              type="pie">
              <kendo-chart-series>
                <kendo-chart-series-item [data]="[1,1,1]"
                  [color]="['green', 'yellow', 'red']"
                  [labels]="['Closed', 'Doing or Done', 'To do']"
                  field="value"
                  categoryField="label">
                  <kendo-chart-series-item-tooltip>
                    <ng-template let-category="label"
                      let-value="value">
                      {{category}}: {{value}}
                    </ng-template>
                  </kendo-chart-series-item-tooltip>
                </kendo-chart-series-item>
              </kendo-chart-series>
            </kendo-sparkline>