Why can I not show hidden columns after loading column order and visibility state from cache?

[Gibran]

Hello,

I'm using the Kendo Grid for Angular and it's showing some weird behavior. I have some hidden columns and a column menu for toggling the visibility. I have a situation where certain columns load hidden and I can't unhide them even with the column menu.

We are trying to cache the user's grid settings. We've enabled column reordering and toggling visibility. Whenever the user hides/shows or reorders a column, we cache the state of the columns in localStorage. And when the user revisits the page, we check for a cached version of the columns and restore it if it exists.

For some reason, when the cached columns are restored, I can't unhide the hidden columns. I go to the column menu, and it's unchecked (which means hidden), but when I check it and then hit apply, the column is still hidden. I look back in the menu and it's still checked. In the code, I look at the state of the column in grid.columns, and it shows that 'hidden' is set to true.

Here is my code:

    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;
        }
    }

Can anyone see why hidden columns won't show after loading them from the cache?

[Adil]

Hi! did you find any solution on this? I have grid too i can select hide columns and press apply and apply button not working... when i press back three dots columns are hiding