angular-slickgrid 9.0.0 → 9.0.1

package/docs/grid-functionalities/add-update-highlight.md

@@ -1,258 +0,0 @@
-#### index
-- CRUD Methods
-  - [Add Item](#add-an-item-row)
-  - [Delete Item](#delete-an-item-row)
-  - [Update Item](#update-an-item-row)
-  - [Upsert Item](#upsert-an-item-row)
-  - [Default Option Flags](#crud-default-option-flags)
-- [Highlight a Row](#highlight-a-row-item)
-
-### Description
-When working with the grid, you might want to Add / Update or Hightlight an item row from the Datagrid.
-
-**Note:** This is strictly a client side event, you still have to implement any backend change yourself.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/additem) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-additem.component.ts)
-
-## CRUD Methods
-### Add an Item (row)
-Please note that you need to provide the `id` by yourself and remember that it has to be **unique**, else the `Slickgrid DataView` will throw you an error in the console.
-
-##### View
-```html
-<angular-slickgrid gridId="grid2"
-     (onAngularGridCreated)="angularGridReady($event.detail)"
-     (onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
-     (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
-     [columns]="columnDefinitions" [options]="gridOptions" [dataset]="dataset">
-</angular-slickgrid>
-```
-
-##### Component
-```typescript
-import { Component, OnInit} from '@angular/core';
-import { AngularGridInstance } from 'angular-slickgrid';
-
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  ngOnInit(): void {
-    this.columnDefinitions = [];
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  addNewItem() {
-    const newItem = {
-      id: this.dataset.length + 1, // it's up to you to decide on what the ID will be, as long as it's unique
-      // ... your item properties
-    };
-
-    // add the item to the grid
-    this.angularGrid.gridService.addItem(newItem);
-  }
-}
-```
-
-#### Add Item Position (top/bottom)
-When adding an item, you can add it on top (default) of the grid or at the bottom of the grid. In order to change that, you can use the `position` property.
-```ts
-// add the item to the end of grid
-this.angularGrid.gridService.addItem(newItem, { position: 'bottom' });
-```
-
-#### Change default flags
-When adding an item, you have access to change any of the default flags through the second argument of `addItem` method.
-```ts
-// add the item to the end of grid
-this.angularGrid.gridService.addItem(newItem, {
-  // the defaults are shown below
-  highlightRow: true, // do we want to highlight the row after the insert
-  position: 'top',    // which position of the grid to add the item
-  resortGrid: false,  // do we want to resort the grid after the insert
-  selectRow: false,   // do we want to select the row after the insert
-  triggerEvent: true  // do we want to trigger an event after the insert
-});
-```
-
-### Delete an Item (row)
-To delete a row, you can use `deleteItem(s)` and the pass the entire object(s) or use `deleteItemById(s) in which you need to provide the object `id` to delete and the method will find it in the grid and remove it from the grid. Also please note that it's only deleting from the grid (by removing it from the DataView), meaning that it won't remove it from your database.
-
-##### View
-```html
-<angular-slickgrid gridId="grid2"
-     (onAngularGridCreated)="angularGridReady($event.detail)"
-     (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
-     [columns]="columnDefinitions"
-     [options]="gridOptions"
-     [dataset]="dataset">
-</angular-slickgrid>
-```
-
-##### Component
-```typescript
-import { Component, OnInit} from '@angular/core';
-import { AngularGridInstance } from 'angular-slickgrid';
-
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  ngOnInit(): void {
-    this.columnDefinitions = [];
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.grid;
-  }
-
-  removeItem(itemId: number | string) {
-    // remove the item from the grid
-    this.angularGrid.gridService.deleteItemById(itemId);
-
-    // or multiple Ids passed as an array (number or string)
-    // this.angularGrid.gridService.deleteItemByIds([1, 2]); // e.g. remove user id 1 and 2
-  }
-}
-```
-
-#### Change default flags
-When adding an item, you have access to change any of the default flags through the second argument of `addItem` method.
-```ts
-// add the item to the end of grid
-this.angularGrid.gridService.deleteItemById(123, {
-  // the defaults are shown below
-  triggerEvent: true  // do we want to trigger an event after the insert
-});
-```
-
-### Update an Item (row)
-To update an item, you can use `updateItem(s)` and the pass the entire object(s) in this case it does not require you to know the row number, it will try to find the row by itself (it uses the "id" for that) and update the item. The other way would be to use `updateItemById` in which you need to provide the object `id` to update the item.
-
-##### Component
-```typescript
-import { Component, OnInit, Injectable } from '@angular/core';
-import { AngularGridInstance } from 'angular-slickgrid';
-
-@Injectable()
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [];
-  }
-
-  updateItem(upItem) {
-    this.angularGrid.gridService.updateItem(upItem);
-  }
-}
-```
-
-#### Change default flags
-When adding an item, you have access to change any of the default flags through the second argument of `addItem` method.
-```ts
-// add the item to the end of grid
-this.angularGrid.gridService.updateItem(newItem, {
-  // the defaults are shown below
-  highlightRow: true,       // do we want to highlight the row after the update
-  selectRow: false,         // do we want to select the row after the update
-  scrollRowIntoView: false, // do we want to scroll the row into the viewport after the update
-  triggerEvent: true        // do we want to trigger an event after the update
-});
-```
-
-### Upsert an Item (row)
-Upsert will do an Insert when not found or update if it found the item already exist in the grid.
-
-##### Component
-```typescript
-import { Component, OnInit, Injectable } from '@angular/core';
-import { AngularGridInstance } from 'angular-slickgrid';
-
-@Injectable()
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [];
-  }
-
-  updateItem(upItem) {
-    this.angularGrid.gridService.upsertItem(upItem);
-  }
-}
-```
-
-### CRUD Default Option Flags
-All the CRUD methods have default option flags that can be changed which will do certain actions. The default option flags are the following for each of the CRUD method (`upsert` will use the flags of the insert or the update depending on which method it calls).
-```ts
-const GridServiceDeleteOptionDefaults: GridServiceDeleteOption = {
-  triggerEvent: true  // do we want to trigger an event after the insert
-};
-
-const GridServiceInsertOptionDefaults: GridServiceInsertOption = {
-  highlightRow: true, // do we want to highlight the row after the insert
-  position: 'top',    // which position of the grid to add the item
-  resortGrid: false,  // do we want to resort the grid after the insert
-  selectRow: false,   // do we want to select the row after the insert
-  triggerEvent: true  // do we want to trigger an event after the insert
-};
-
-const GridServiceUpdateOptionDefaults: GridServiceUpdateOption = {
-  highlightRow: true,       // do we want to highlight the row after the update
-  selectRow: false,         // do we want to select the row after the update
-  scrollRowIntoView: false, // do we want to scroll the row into the viewport after the update
-  triggerEvent: true        // do we want to trigger an event after the update
-};
-```
-
-## Highlight a row item
-Highlighting a row is customizable with SASS, you can change the highlighted color and/or animation by changing the [SASS variables](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) `$row-highlight-background-color` and/or `$row-highlight-fade-animation`
-Take a look at all the available [SASS variables](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss).
-
-##### Component
-```typescript
-import { Component, OnInit, Injectable } from '@angular/core';
-import { AngularGridInstance } from 'angular-slickgrid';
-
-@Injectable()
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [];
-  }
-
-  updateItem(rowNumber) {
-    const fadingDelay = 2000; // in milliseconds
-
-    // you can pass an optional fading delay (1500ms by default)
-    this.angularGrid.gridService.highlightRow(rowNumber, fadingDelay);
-  }
-}
-```

package/docs/grid-functionalities/column-row-spanning.md

@@ -1,74 +0,0 @@
-### Description
-You can use Colspan and/or Rowspan by using the DataView Item Metadata Provider, however please note that row spanning is under a flag because of its small perf hit (`rowspan` requires an initial loop through of all row item metadata to map all row span).
-
-> [!NOTE]
-> Please note that `colspan` and `rowspan` have multiple constraints that you must be aware,
-> any side effects will **not** keep anything in sync since metadata are based on grid row index based...
-> for example: Filtering/Sorting/Paging/ColumnReorder/ColumnHidding
-> These side effect will require user's own logic to deal with such things!
-
-### Demo
-
-#### Colspan / Rowspan
-[Employee Timesheets](https://ghiscoding.github.io/Angular-Slickgrid/#/rowspan-timesheets) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid43.component.ts)
-
-[Large Dataset](https://ghiscoding.github.io/Angular-Slickgrid/#/rowspan-large) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid44.component.ts)
-
-### Basic Usage
-
-You can see a basic example below where we set static `metadata`, however you will must often use it with dynamic `metadata`, and it works in both cases. From the example below, the first object key is a number, `0` in our case, which represents the row index (again this can be dynamic). Then if we continue drilling down, we get a `columns` property which holds another object containing all the column indexes that will have a span (which can be individual `colspan`, `rowspan` or both of them at the same time).
-
-What if we have a side effect that kicks in, for example a Sorting, Filtering, ...?
-Well, that is where you the developer will have to add your own logic to update this `metadata` with the expected code logic of what and how it's supposed to behave. Because as mentioned in the note above, the library is pretty dumb and does not know what is the expected behavior for any side effects and it **will not change any** of the `metadata` spans, you have to implement such logic yourself (for example, if we drag a column to another position then the `rowspan` will stay at the same exact column index which is most probably not what you want, you could subscribe to the `onColumnsChanged` to deal with this one). You can see the full list of Events that you can listen for changes and implement necessary callback to update your `metadata` accordingly (see [List of Available Events](https://ghiscoding.gitbook.io/angular-slickgrid/events/available-events) docs).
-
-##### Component
-
-```ts
-import type { Column, GridOption, ItemMetadata } from 'angular-slickgrid';
-
-@Component({
-  styleUrls: ['grid43.component.scss'],
-  templateUrl: './grid43.component.html',
-  encapsulation: ViewEncapsulation.None,
-})
-export class Grid43Component implements OnInit {
-  gridOptions: GridOption;
-  columnDefinitions: Column[];
-  dataset: any[] = [];
-
-  // metadata can be dynamic too, it doesn't have to be preset
-  metadata: ItemMetadata | Record<number, ItemMetadata> = {
-    0: {
-      columns: {
-        1: { rowspan: 2 },
-        2: { colspan: 2 },
-        10: { colspan: 3, rowspan: 10 },
-        13: { colspan: 2 },
-        17: { colspan: 2, rowspan: 2 },
-      },
-    }
-  };
-
-  ngOnInit(): void {
-    // define the grid options & columns and then create the grid itself
-    this.defineGrid();
-  }
-
-  defineGrid() {
-    this.columnDefinitions = [ /*...*/ ];
-
-    this.gridOptions = {
-      enableCellNavigation: true,
-      enableCellRowSpan: true, // required for rowspan to work
-      dataView: {
-        globalItemMetadataProvider: {
-          getRowMetadata: (_item, row) => {
-            return this.metadata[row];
-          },
-        },
-      },
-      rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
-    };
-  }
-}
-```

package/docs/grid-functionalities/dynamic-item-metadata.md

@@ -1,124 +0,0 @@
-SlickGrid is very flexible and it allows you to change or add CSS Class(es) dynamically (or on page load) by changing it's `Item Metadata` (see [SlickGrid Wiki - Item Metadata](providing-grid-data.md)). There is also a Stack Overflow [answer](https://stackoverflow.com/a/19985148/1212166), which this code below is based from.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/additem) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-additem.component.ts)
-
-### Dynamically Change CSS Classes
-##### View
-```html
-<button class="btn btn-sm btn-default" (click)="changeDurationBackgroundColor()">Highlight Rows with Duration over 50</button>
-
-<angular-slickgrid gridId="grid2"
-  [columns]="columnDefinitions"
-  [options]="gridOptions"
-  [dataset]="dataset"
-  (onAngularGridCreated)="angularGridReady($event.detail)">
-</angular-slickgrid>
-```
-
-##### Component
-```typescript
-// VERY IMPORTANT
-// changing CSS Styles only seems to work with Encapsulation set to None
-@Component({
-  styles: ['.duration-bg { background-color: #e9d4f1 !important }'],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './grid-additem.component.html'
-})
-export class Example {
-  // get the SlickGrid Grid & DataView object references
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.dataView = angularGrid.dataView;
-    this.grid = angularGrid.slickGrid;
-  }
-
-  /**
-   * Change the Duration Rows Background Color
-   * You need to get previous SlickGrid DataView Item Metadata and override it
-   */
-  changeDurationBackgroundColor() {
-    this.dataView.getItemMetadata = this.updateItemMetadataForDurationOver50(this.dataView.getItemMetadata);
-
-    // also re-render the grid for the styling to be applied right away
-    this.grid.invalidate();
-    this.grid.render();
-  }
-
-  /**
-   * Override the SlickGrid Item Metadata, we will add a CSS class on all rows with a Duration over 50
-   * For more info, you can see this SO https://stackoverflow.com/a/19985148/1212166
-   */
-  updateItemMetadataForDurationOver50(previousItemMetadata: any) {
-    const newCssClass = 'duration-bg';
-
-    return (rowNumber: number) => {
-      const item = this.dataView.getItem(rowNumber);
-      let meta = {
-        cssClasses: ''
-      };
-      if (typeof previousItemMetadata === 'object') {
-        meta = previousItemMetadata(rowNumber);
-      }
-
-      // our condition to check Duration over 50
-      if (meta && item && item.duration) {
-        const duration = +item.duration; // convert to number
-        if (duration > 50) {
-          meta.cssClasses = (meta.cssClasses || '') + ' ' + newCssClass;
-        }
-      }
-
-      return meta;
-    };
-  }
-}
-```
-
-### On Page Load
-Or if you want to apply the styling right after the page load
-
-##### Component
-```typescript
-export class Example {
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.dataView = angularGrid.dataView;
-    this.grid = angularGrid.slickGrid;
-
-    // if you want to change background color of Duration over 50 right after page load,
-    // you would put the code here, also make sure to re-render the grid for the styling to be applied right away
-    this.dataView.getItemMetadata = this.updateItemMetadataForDurationOver50(this.dataView.getItemMetadata);
-    this.grid.invalidate();
-    this.grid.render();
-  }
-
-  /**
-   * Change the SlickGrid Item Metadata, we will add a CSS class on all rows with a Duration over 50
-   * For more info, you can see this SO https://stackoverflow.com/a/19985148/1212166
-   */
-  updateItemMetadataForDurationOver50(previousItemMetadata: any) {
-    const newCssClass = 'duration-bg';
-
-    return (rowNumber: number) => {
-      const item = this.dataView.getItem(rowNumber);
-      let meta = {
-        cssClasses: ''
-      };
-      if (typeof previousItemMetadata === 'object') {
-        meta = previousItemMetadata(rowNumber);
-      }
-
-      if (meta && item && item.duration) {
-        const duration = +item.duration; // convert to number
-        if (duration > 50) {
-          meta.cssClasses = (meta.cssClasses || '') + ' ' + newCssClass;
-        }
-      }
-
-      return meta;
-    };
-  }
-}
-```

package/docs/grid-functionalities/excel-copy-buffer.md

@@ -1,145 +0,0 @@
-### Description
-Just like Excel you can select multiple cell and copy (`Ctrl+C`) and paste to Excel (`Ctrl+V`). However what you must know is that this plugin evaluate every single cell by their values (the raw value unless you specify otherwise, continue reading for more info).
-
-### Demo
-#### with Inline Editor
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/editor) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-editor.component.ts)
-
-#### with Localization
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/localization) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-localization.component.ts)
-
-### Usage
-All you need to do is enable the Grid Option `enableExcelCopyBuffer: true` and give it a try. From your grid, start selecting multiple cells with the mouse then copy (with `Ctrl+C`) and paste to Excel (with `Ctrl+V`)
-
-##### Component
-```typescript
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'id' },
-  { id: 'description', name: 'Description', field: 'description' },
-  { id: 'duration', name: 'Duration (days)', field: 'duration', type: 'number' },
-];
-this.gridOptions = {
-  enableExcelCopyBuffer: true,
-};
-```
-
-### Copy & Paste with Cell Formatter
-What if you have a date in UTC format in your dataset but your grid shows it as a Date ISO format? In that case, you are using a Formatter (e.g. `formatter: Formatters.dateIso`) and you wish to use that formatter. Good news, that is supported with and to make is simpler for the implementation, we will use a flag that already exist which is `exportWithFormatter` and is used by the `Export to File` service (for more info, read [Wiki - Export to File](Export-to-Text-File.md)
-
-The `exportWithFormatter` can be used in 2 ways, on each column definition independently or for the entire grid through it's grid option.
-##### `exportWithFormatter` through each Column Definition
-```typescript
-this.columnDefinitions = [
-  {
-    id: 'start', name: 'Start', field: 'start',
-    formatter: Formatters.dateIso,
-    exportWithFormatter: true
-  },
-  {
-    id: 'finish', name: 'Finish', field: 'finish',
-    formatter: Formatters.dateIso,
-    exportWithFormatter: true
-  },
-];
-
-this.gridOptions = {
-  enableExcelCopyBuffer: true,
-};
-```
-
-##### `exportWithFormatter` through Grid Options
-```typescript
-this.columnDefinitions = [
-  { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso },
-  { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso },
-];
-
-this.gridOptions = {
-  enableExcelCopyBuffer: true,
-  exportOptions: {
-    // set at the grid option level, meaning all column will evaluate the Formatter (when it has a Formatter defined)
-    exportWithFormatter: true
-  },
-};
-```
-#### Sanitize Formatter Ouput
-In some cases a Formatter can be formed of HTML and that will end up showing in your Copy+Paste. You can simply use the `sanitizeDataExport` flag which will remove any HTML tags from the output. For an example below, let say that our first Title column are all displayed in bold in the grid (e.g. `<b>Title 1</b>`), we want to sanitize that output a regular text output (e.g. `Title 1`)
-
-##### `exportWithFormatter` through each Column Definition
-```typescript
-this.columnDefinitions = [
-  {
-    id: 'title', name: 'Title', field: 'id',
-    formatter: Formatters.bold,
-    exportWithFormatter: true,
-    sanitizeDataExport: true
-  }
-];
-
-this.gridOptions = {
-  enableExcelCopyBuffer: true
-};
-```
-
-##### `exportWithFormatter` through Grid Options
-```typescript
-this.columnDefinitions = [
-  { id: 'title', name: 'Title', field: 'id', formatter: Formatters.bold }
-];
-
-this.gridOptions = {
-  enableExcelCopyBuffer: true,
-  exportOptions: {
-    exportWithFormatter: true,
-    sanitizeDataExport: true
-  },
-};
-```
-
-### Disable pasting on specific columns
-If you want to disable pasting values for specific columns you can deactivate it using the denyPaste property on the Column config.
-
-```typescript
-this.columnDefinitions = [
-  {
-    id: 'colA', name: 'Col A', field: 'col_a',
-    formatter: Formatters.bold,
-    exportWithFormatter: true,
-    sanitizeDataExport: true,
-    denyPaste: true // <------------
-  }
-];
-```
-
-This will even work in situations where your table copy buffer stretches over disabled cells, by simply skipping them. So for the following config (x = paste disabled; o = paste enabled), pasting a 3 cell stretching table buffer will result in Col A and C being updated but ColB ignoring the paste and keeping its original value
-
-Col A | Col B | Col C \
-\---------------------\
-&nbsp;&nbsp; o &nbsp;&nbsp;  | &nbsp;&nbsp;&nbsp; x &nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; o \
-NEW | &nbsp;&nbsp;&nbsp; x &nbsp;&nbsp; | &nbsp;NEW
-
-### Disable pasting on specific cells
-If you need even more fine grained control, you can make use of the gridOption `onBeforePasteCell`:
-
-```typescript
-this.gridOptions = {
-  enableExcelCopyBuffer: true,
-  excelCopyBufferOptions: {
-    onBeforePasteCell: (e, args) => {
-      // e.g deny paste on first cell
-      return args.cell > 0;
-    }
-  }
-};
-```
-
-This way you have full control, via the args parameters, to get a ref to the current row and cell being updated. Also keep in mind that while performing a buffered table paste (e.g three cols at once) and only one of them has a denying condition, the other cells paste will pass successfully.
-
-### Handling quoted multiline pastes
-When copying Excel cells, where the value is a multiline text, the copy buffer will result in a quoted text buffer. Slickgrid will properly handle the case when this content itself contains `\n` characters, to not break onto multiple rows as well as not split on the next column if `\t` characters are contained.
-
-You can control if the newlines should be replaced with a specific value by defining it in `replaceNewlinesWith`. As an example you could set it to `' '`.
-
-Additionally, you can define that the quoted string is pasted without the quotes by setting `removeDoubleQuotesOnPaste` to true.
-
-> Note: requires v8.2.0 and higher