Grid State & Preset

index

• Description
• Grid State
• Grid Presets
• Grid State Event

Demo

Look at your developer console before leaving the page

Regular grid

Demo Page / Demo Component

with Backend Service

Demo Page / Demo Component

Descriptions

Grid State

The Grid State are what we defined as the currently used Filters / Sorters / Pagination of the actual grid (pagination is only returned when used with Backend Service API).

Presets

Presets can be used to preset a grid with certain Filters / Sorters / Pagination.

Combining the two together

So basically, the idea is to save the Grid State in Local Storage (or DB) before the grid gets destroyed and once we come back to that same page we can preset the grid with the exact same state as it was before leaving the page (just like if we were doing a forward/back button with browser history).

Note It currently does not hold the columns (order position with show/hide flags), but there are a plan to also add them in the future. If you wish to help and/or contribute, please reach out by opening a new issue.

Grid State

You can get the Grid State at any point in time. However if you wish to save the grid state before leaving the page and store that in Local Storage, then the best way is to use the onBeforeGridDestroy Event Emitter.

Template

<angular-slickgrid gridId="grid1"
            [columnDefinitions]="columnDefinitions"
            [gridOptions]="gridOptions"
            [dataset]="dataset"
            (onBeforeGridDestroy)="saveCurrentGridState($event)">
  </angular-slickgrid>

Component

import { GridState, GridStateService } from 'angular-slickgrid';

@Component({
  templateUrl: './grid-demo.component.html'
})
@Injectable()
export class GridDemoComponent {
  constructor(private gridStateService: GridStateService) { }

  // you can save it to Local Storage of DB in this call
  saveCurrentGridState(grid) {
    const gridState: GridState = this.gridStateService.getCurrentGridState();
    console.log('Leaving page with current grid state', gridState);
  }
}

Using Grid Presets & Filter SearchTerm(s)

What happens when we use the grid presets and a Filter Default SearchTerm? In this case, the presets will win over filter searchTerm(s). The cascading order of priorities is the following

1. Do we have any presets? Yes use them, else go to step 2
2. Do we have any Filter searchTerm(s)? Yes use them, else go to step 3
3. No presets and no searchTerm(s), load grid with default grid & column definitions

Grid Presets

Structure

The current structure of a Grid Presets is the following

export interface CurrentFilter {
  columnId: string;
  operator?: OperatorType | OperatorString;
  searchTerm?: SearchTerm;
  searchTerms?: SearchTerm[];
}
export interface CurrentSorter {
  columnId: string;
  direction: SortDirection | SortDirectionString;
}
export interface GridState {
  filters?: CurrentFilter[];
  sorters?: CurrentSorter[];
  pagination?: {
    pageNumber: number;
    pageSize: number;
  };
}

Example

For example, we can set presets on a grid like so: Component

import { GridState, GridStateService } from 'angular-slickgrid';

@Component({
  templateUrl: './grid-demo.component.html'
})
@Injectable()
export class GridDemoComponent {
  constructor(private gridStateService: GridStateService) { }

  ngOnInit(): void {
    this.columnDefinitions = [
      { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true, sortable: true },
      { id: 'duration', name: 'Duration', field: 'duration', filterable: true, sortable: true },
      { id: 'complete', name: '% Complete', field: 'percentComplete', filterable: true, sortable: true },
    ];

    this.gridOptions = {
      enableFiltering: true,

      // use columnDef searchTerms OR use presets as shown below
      presets: {
        filters: [
          { columnId: 'duration', searchTerms: [2, 22, 44] },
          { columnId: 'complete', searchTerm: '>5' }
        ],
        sorters: [
          { columnId: 'duration', direction: 'DESC' },
          { columnId: 'complete', direction: 'ASC' }
        ],

        // with Backend Service ONLY, you can also add Pagination info
        pagination: { pageNumber: 2, pageSize: 20 }
      }
    };
}

Grid State Event

There are 2 ways of subscribing to GridState Service event changed.

1. Through (onGridStateServiceChanged) Event Emitter (recommended)
2. Through onGridStateChanged Observable on the GridState Service.

Examples

1. (onGridStateServiceChanged) Event Emitter (recommended)

View

<angular-slickgrid gridId="grid1"
         [columnDefinitions]="columnDefinitions"
         [gridOptions]="gridOptions"
         [dataset]="dataset"
         (onGridStateServiceChanged)="gridStateChanged($event)">
</angular-slickgrid>

Component

export class ExampleComponent implements OnInit {
  gridStateChanged(gridState: GridStateChange) {
    console.log('Grid State changed:: ', gridState);
  }
}

2. Through onGridStateChanged Observable on the GridState Service

Component

import { GridStateChange, GridStateService } from 'angular-slickgrid';

export class ExampleComponent implements OnInit, OnDestroy {
  gridStateSub: Subscription;

  constructor(private gridStateService: GridStateService) {
    this.gridStateSub = this.gridStateService.onGridStateChanged.subscribe((data: GridStateChange) => console.log(data));
  }

  ngOnDestroy() {
    this.gridStateSub.unsubscribe();
  }
}