0

I have a scenario where the user can hide/show columns with the column choser, navigate away and then when he/she comes back to the page with the grid the columns that were hidden at the point of the navigation are still hidden.

I thought about a service that for each column sets the visibility of that column. My issue is that I can't detect which column has being hidden when an user checks the box of the column chooser.

Just to make an example. I have a table with 3 columns: Id, FirstName, LastName. The table has the columnChooser configured in mode "select". When a user clicks on the checkbox of the Id I need to detect that "check event" and read what checkbox fired it and what column it was associated. In this case something like "column Id fired the event".

Is there a way that this can achieved? Any tips or solution?

Lfederzoni
  • 3
  • 2

1 Answers1

1

In DxDataGrid you don´t need track columns, you can track whole grid. There is a posibility of StateStoring. This is storing column visibility, if there is any grouping, sorting, columns width, value from search panel etc. You can than store it on browser local storage, if you use default save and load, or you can override it via customSave and customLoad and then is possible to use own service and store it for example in database.

Where HTML looks like:

<dx-data-grid [dataSource]="friends" [allowColumnReordering]="true" 
      showRowLines="true" height="100%" [allowColumnResizing]="true" 
      [hoverStateEnabled]="false" [width]="'100%'"
      [(selectedRowKeys)]="selectedRowKeys">

      <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
      <dxo-state-storing [enabled]="true" type="custom" [customSave]="saveGridState" 
             [customLoad]="loadGridState">
      </dxo-state-storing>

      <dxi-column dataField="Id" dataType="number" [visible]="true">          
      </dxi-column>
      <dxi-column dataField="FirstName" dataType="string" [visible]="true">
      </dxi-column>
      <dxi-column dataField="LastName" dataType="string" [visible]="true">          
      </dxi-column>
      <dxi-column dataField="Age" dataType="number" [visible]="false">
      </dxi-column>
</dx-data-grid>

And ts like:

export class FriendsGridsComponent
friends: any[] = [];
stateKey = 'friendsGrid';

constructor(pageConfigService: PageConfigService){}

 saveGridState(state) {
    console.log('saving grid state');
    this.pageConfigService.saveState(this.stateKey, state);
  }

  async loadGridState(): Promise<Object> {
    return this.pageConfigService.restoreState(this.stateKey);
    
    }
  }

Implementation of PageConfigService is on you. In my project is big, so I don´t want to add it here whole and it is also very specific for my project. Save state is very easy, just save it somewhere. Little complicated is restoring, because you need wait until state is loaded back. If you don´t wait, it will win default settings from HTML and not your saved state.

Wasullda
  • 23
  • 2