|
| 1 | +#### index |
| 2 | +- Frequently asked questions |
| 3 | + - [Merging grid options with applied defaults](#merging-grid-options-with-applied-defaults) |
| 4 | + |
| 5 | +### Description |
| 6 | +When working with the grid, you might want to Add / Update or Hightlight an item row from the Datagrid. |
| 7 | + |
| 8 | +**Note:** This is strictly a client side event, you still have to implement any backend change yourself. |
| 9 | + |
| 10 | +### Demo |
| 11 | +[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/additem) / [Demo Component](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/grid-additem.component.ts) |
| 12 | + |
| 13 | +## Frequently asked questions |
| 14 | +### Merging grid options with applied defaults |
| 15 | +When you pass gridOptions to the `angular-slickgrid` component, keep in mind that they get overloaded with the [Default Grid Options](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/modules/angular-slickgrid/global-grid-options.ts). In contrast to what might be expected, this change won't overwrite your provided object. |
| 16 | + |
| 17 | +In cases, where depending on your data you might want to update the options (e.g. make columns readonly based on permissions) make sure to update your reference in the onAngularGridCreated event handler as shown below: |
| 18 | + |
| 19 | +#### View |
| 20 | +```html |
| 21 | +<angular-slickgrid |
| 22 | + gridId="grid1" |
| 23 | + [columnDefinitions]="columnDefinitions" |
| 24 | + [gridOptions]="gridOptions" |
| 25 | + [dataset]="dataset" |
| 26 | + (onAngularGridCreated)="angularGridReady($event.detail)"> |
| 27 | +</angular-slickgrid> |
| 28 | +``` |
| 29 | + |
| 30 | +#### Component |
| 31 | +```typescript |
| 32 | +import { Component, OnInit} from '@angular/core'; |
| 33 | +import { AngularGridInstance } from 'angular-slickgrid'; |
| 34 | + |
| 35 | +export class GridBasicComponent implements OnInit { |
| 36 | + columnDefinitions: Column[]; |
| 37 | + gridOptions: GridOption = { |
| 38 | + // your initial settings |
| 39 | + }; |
| 40 | + dataset: any[]; |
| 41 | + |
| 42 | + ngOnInit(): void { |
| 43 | + this.columnDefinitions = []; |
| 44 | + } |
| 45 | + |
| 46 | + angularGridReady(angularGrid: AngularGridInstance) { |
| 47 | + this.angularGrid = angularGrid; |
| 48 | + |
| 49 | + // update your reference to make use of applied defaults |
| 50 | + this.gridOptions = this.angularGrid.slickGrid.getOptions() as GridOption; |
| 51 | + } |
| 52 | +} |
| 53 | +``` |
0 commit comments