angular-slickgrid 9.0.0 → 9.0.2

package/docs/grid-functionalities/Header-Menu-&-Header-Buttons.md

@@ -1,125 +0,0 @@
-### Demo
-
-#### Header Button Plugin
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/headerbutton) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-headerbutton.component.ts)
-
-#### Header Menu Plugin
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/headermenu) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-headermenu.component.ts)
-
-## Header Menu
-The `Header Menu` is now part of `Slickgrid-Universal` and is enabled by default via the grid option "enableHeaderMenu" flag.
-
-### How to use it?
-#### It's Enabled by default
-Technically, it's enable by default and so you don't have anything to do to enjoy it. However if you want to customize the content of the Header Menu, then continue reading.
-
-## Customization
-### Custom Commands
-The Header Menu also comes, by default, with a list of built-in custom commands (all their `positionOrder` are in the reserved range of 40 to 60)
-- Sort Ascending (you can hide it with `hideSortCommands: true`)
-- Sort Descending (you can hide it with `hideSortCommands: true`)
-- Hide Column (you can hide it with `hideColumnHideCommand: true`)
-
-This section is called Custom Commands because you can also customize this section with your own commands. To do that, you need to fill in 2 properties (an array of `headerMenuItems` that will go under each column definition and define `onCommand` callbacks) in your Grid Options. For example, `Slickgrid-Universal` is configured by default with these settings (you can overwrite any one of them):
-```ts
-this.gridOptions = {
-   enableAutoResize: true,
-   enableHeaderMenu: true,   // <<-- this will automatically add extra custom commands
-   enableFiltering: true,
-   headerMenu: {
-     onCommand: (e, args) => {
-       if (args.command === 'hide') {
-         this.controlService.hideColumn(args.column);
-         this.controlService.autoResizeColumns();
-       } else if (args.command === 'sort-asc' || args.command === 'sort-desc') {
-         // get previously sorted columns
-         const cols: ColumnSort[] = this.sortService.getPreviousColumnSorts(args.column.id + '');
-
-         // add to the column array, the column sorted by the header menu
-         cols.push({ sortCol: args.column, sortAsc: (args.command === 'sort-asc') });
-         this.sortService.onLocalSortChanged(this.gridObj, this.gridOptions, this.dataviewObj, cols);
-
-         // update the this.gridObj sortColumns array which will at the same add the visual sort icon(s) on the UI
-         const newSortColumns: ColumnSort[] = cols.map((col) => {
-           return { columnId: col.sortCol.id, sortAsc: col.sortAsc };
-         });
-         this.gridObj.setSortColumns(newSortColumns); // add sort icon in UI
-       } else {
-         alert('Command: ' + args.command);
-       }
-     }
-  }
-};
-```
-#### Callback Hooks
-There are 2 callback hooks which are accessible in the Grid Options
-- `onBeforeMenuShow`
-- `onCommand`
-
-For more info on all the available properties of the custom commands, you can read refer to the doc written in the Grid Menu [implementation](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/extensions/slickHeaderButtons.ts) itself.
-
-### How to change icon(s) of the default commands?
-You can change any of the default command icon(s) by changing the `icon[X-command]`, for example, see below for the defaults.
-```ts
-this.gridOptions = {
-   enableHeaderMenu: true,
-   headerMenu: {
-     iconColumnHideCommand: 'mdi mdi-close'
-     iconSortAscCommand: 'mdi mdi-sort-ascending'
-     iconSortDescCommand: 'mdi mdi-sort-descending',
-   },
-};
-```
-### How to Disable the Header Menu?
-You can disable the Header Menu, by calling `enableHeaderMenu: false` from the Grid Options.
-```ts
-this.gridOptions = {
-   enableHeaderMenu: false
-};
-```
-
-### How to Exclude Header Menu from a Particular Column?
-You can exclude a column from getting a Header Menu by calling `excludeFromHeaderMenu` in your Column Definition. For example, we don't need it on a column that has an edit icon:
-
-```ts
-this.columnDefinitions = [
-  { id: 'edit', formatter: Formatters.editIcon, excludeFromHeaderMenu: true, excludeFromExport: true },
-  { id: 'title', name: 'Title', field: 'title', sortable: true },
-  { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
-];
-```
-
-### Sample
-You can add Header Menu to 1 column or all columns like shown below. You can also add sub-menus by nesting `commandItems`
-
-```ts
-// add custom Header Menu to all columns except "Action"
-this.columnDefinitions.forEach(col => {
-  col.header = {
-    menu: {
-      commandItems: [
-        { command: 'sort-ascending', title: 'Sort Ascending' },
-        { command: 'sort-descending', title: 'Sort Descending' },
-        'divider',
-        {
-          // we can also have multiple nested sub-menus
-          command: 'custom-actions', title: 'Hello', positionOrder: 99,
-          commandItems: [
-            { command: 'hello-world', title: 'Hello World' },
-            { command: 'hello-slickgrid', title: 'Hello SlickGrid' },
-            {
-              command: 'sub-menu', title: `Let's play`, cssClass: 'green', subMenuTitle: 'choose your game', subMenuTitleCssClass: 'text-italic salmon',
-              commandItems: [
-                { command: 'sport-badminton', title: 'Badminton' },
-                { command: 'sport-tennis', title: 'Tennis' },
-                { command: 'sport-racquetball', title: 'Racquetball' },
-                { command: 'sport-squash', title: 'Squash' },
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  };
-});
-```

package/docs/grid-functionalities/Resize-by-Cell-Content.md

@@ -1,138 +0,0 @@
-##### index
-- [Usage Demo](#usage)
-- [Resize by Content - Grid Options](#resize-by-content---grid-options)
-- [Resize by Content - Column Options](#resize-by-content---column-options)
-
-### Demo
-[Demo](https://ghiscoding.github.io/Angular-Slickgrid/#/resize-by-content) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-resize-by-content.component.ts)
-
-### Description
-The default of Slickgrid-Universal is to fit all columns in the container viewport and for the most part that is a good resize to use and it's fast. However if your grid has a lot of columns then doing a fit to viewport is not exactly great, you have lot of columns a few of these columns will become too small (we strongly suggest adding `minWidth` to every column) and you'll start seeing ellipsis to a few of these columns.
-
-The Auto-Resize by Cell Content will fix the problem described in previous paragraph, however it will come with a cost. It will read through all the cell content of all your items (because this could slow down the grid a lot, there's a default to not go over a 1000 rows but that could be overridden if you wish). For that reason the **resize by cell content** is an **opt-in** feature.
-
-How does it work? It loop through the dataset and try to calculate the best possible width, it does so by assuming a few things. For example we assume the a character is by default 7 pixels wide (via `resizeCellCharWidthInPx`), we also assume that not every data will be the same width for example string type might be a little less wide (with chars like "i", "l", "j" are thinner) compare to numbers which are always the same width and so have some ratio option for that (via `resizeDefaultRatioForStringType` and `resizeCalcWidthRatio`).
-
-There are a few configuration options you can use
-- ratio (`resizeDefaultRatioForStringType` and `resizeCalcWidthRatio`)
-- extra padding (`resizeExtraWidthPadding`)
-- char width
-- padding (`resizeCellPaddingWidthInPx`, `resizeFormatterPaddingWidthInPx`, `resizeExtraWidthPadding`)
-- max width threshold (`resizeMaxWidthThreshold`)
-... and more
-
-### Usage
-
-```ts
-defineGrid() {
-  this.columnDefinitions = [
-    { id: 'action', field: 'action', name: 'Action', width: 50, maxWidth: 50 },
-    { id: 'firstName', field: 'firstName', name: 'First Name', mindWidth: 100 },
-    { id: 'lastName', field: 'lastName', name: 'First Name', mindWidth: 100, resizeExtraWidthPadding: 10 },
-    // ...
-  ];
-
-  this.gridOptions = {
-    // ...
-    enableAutoResize: true,
-
-    // resizing by cell content is opt-in
-    // we first need to disable the 2 default flags to disable autoFit/autosize
-    autoFitColumnsOnFirstLoad: false,
-    enableAutoSizeColumns: false,
-
-    // then enable resize by content with these 2 flags
-    autosizeColumnsByCellContentOnFirstLoad: true,
-    enableAutoResizeColumnsByCellContent: true,
-  };
-}
-```
-
-### Resize by Content - Grid Options
-There a few grid options that you can change to override the default resize options. We listed the grid options below for the resize and they should all be there but just in case, you should also check the [GridOption](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/gridOption.interface.ts) and [ResizeByContentOption](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/resizeByContentOption.interface.ts) interface.
-
-```ts
-export interface GridOption {
-  //...
-
-  /**
-   * defaults to true, do we want to resize the grid by content only on the first page or anytime the data changes?
-   * Requires `enableAutoResizeColumnsByCellContent` to be set.
-   * Also don't get confused with `autosizeColumnsByCellContentOnFirstLoad` that flag won't block resize by content after the first load while `resizeByContentOnlyOnFirstLoad`
-   */
-  resizeByContentOnlyOnFirstLoad?: boolean;
-
-  /** Resize by Content multiple options */
-  resizeByContentOptions?: ResizeByContentOption;
-}
-```
-and
-
-```ts
-export interface ResizeByContentOption {
-  /** defaults to false, if a column `width` is provided (or was previously calculated) should we recalculate it or not when resizing by cell content? */
-  alwaysRecalculateColumnWidth?: boolean;
-
-  /**
-   * Defaults to 7, width in pixels of a string character which is used by the resize columns by its content, this can vary depending on which font family/size is used & cell padding.
-   * This is only used when resizing the columns width by their content, we need to know the width of a character in pixel to do all calculations.
-   * Requires `enableAutoResizeColumnsByCellContent` to be set.
-   */
-  cellCharWidthInPx?: number;
-
-  /** Defaults to 6, cell padding width to add to the calculation when resizing columns by their cell text content (requires `enableAutoResizeColumnsByCellContent` to be set) */
-  cellPaddingWidthInPx?: number;
-
-  /** Defaults to around ~0.9, what is the ratio to use (on field `type` "string" only) in the calculation when resizing columns by their cell text content (requires `enableAutoResizeColumnsByCellContent` to be set). */
-  defaultRatioForStringType?: number;
-
-  /** Defaults to 6, padding width to add to the calculation when using a Formatter and resizing columns by their cell text content (requires `enableAutoResizeColumnsByCellContent` to be set). */
-  formatterPaddingWidthInPx?: number;
-
-  /**
-   * Defaults to 1000, how many rows are we going to inspect cell content width?
-   * This is use when calculating all column width by their cell content, it requires `enableAutoResizeColumnsByCellContent` to be set.
-   */
-  maxItemToInspectCellContentWidth?: number;
-
-  /**
-   * Defaults to 5000, how many rows (of a single column) are we going to inspect cell content width?
-   * This is use when calculating column width by their cell content when calling "Resize by Content" (from header menu and/or double-click to resize single column)
-   */
-  maxItemToInspectSingleColumnWidthByContent?: number;
-
-  /** Defaults to 50, what width to remove from new column width when the grid is a frozen (pinned) grid and its column width exceeds the viewport full width. */
-  widthToRemoveFromExceededWidthReadjustment?: number;
-}
-```
-
-### Resize by Content - Column Options
-We listed the column definition options below for the resize and they should all be there but just in case, you should also check the [Column](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/column.interface.ts) interface.
-
-```ts
-export interface Column {
-  /** defaults to false, if a column `width` is provided (or was previously calculated) should we recalculate it or not when resizing by cell content? */
-  resizeAlwaysRecalculateWidth?: boolean;
-
-  /**
-   * Defaults to 1, a column width ratio to use in the calculation when resizing columns by their cell content.
-   * We have this ratio number so that if we know that the cell content has lots of thin character (like 1, i, t, ...) we can lower the ratio to take up less space.
-   * In other words and depending on which font family you use, each character will have different width, characters like (i, t, 1) takes a lot less space compare to (W, H, Q),
-   * unless of course we use a monospace font family which will have the exact same size for each characters and in that case we leave it to 1 but that rarely happens.
-   * NOTE: the default ratio is 1, except for string where we use a ratio of around ~0.9 since we have more various thinner characters like (i, l, t, ...).
-   */
-  resizeCalcWidthRatio?: number;
-
-  /**
-   * no defaults, a character width to use when resizing columns by their cell content.
-   * If nothing is provided it will use `resizeCellCharWidthInPx` defined in the grid options.
-   */
-  resizeCharWidthInPx?: number;
-
-  /** no defaults, what is the column max width threshold to not go over when resizing columns by their cell content */
-  resizeMaxWidthThreshold?: number;
-
-  /** no defaults, what is optional extra width padding to add to the calculation when resizing columns by their cell content */
-  resizeExtraWidthPadding?: number;
-}
-```

package/docs/grid-functionalities/Row-Selection.md

@@ -1,247 +0,0 @@
-#### index
-- [Single Row Selection](#single-row-selection)
-- [Multiple Row Selections](#multiple-row-selections)
-- [Change Dynamically Single/Multiple Selections](#changing-dynamically-from-single-to-multiple-selections-and-vice-versa)
-- [Mixing Single & Multiple Row Selections](#mixing-single--multiple-row-selections)
-- [Disable Custom Rows Selections via `selectableOverride`](#disable-custom-rows-selections-via-selectableoverride)
-- [Disable External Button when having Empty Selection](#disable-external-button-when-having-empty-selection)
-- [Change Row Selections](#change-row-selections)
-- Troubleshooting
-  - [Adding a Column dynamically is removing the Row Selection, why is that?](#adding-a-column-dynamically-is-removing-the-row-selection-why-is-that)
-
-### Description
-For row selection, you can simply play with couple of grid options (see below) and subscribe to `onSelectedRowsChanged` (a SlickGrid Event that is, it's not an Observable). However please note that `onSelectedRowsChanged` is a function available on the `Grid` object and you will need bind to `(gridChanged)` to get the object when grid is ready. There are 2 types of row selection(s) which you can do.
-
-**Note:** `enableCheckboxSelector` and `enableExcelCopyBuffer` do not work well together, this is because they both share the same `Row.SelectionModel` and one cancels the other. It is recommended to not use `enableExcelCopyBuffer` in that case.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/selection) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-rowselection.component.ts)
-
-## Single Row Selection
-For a single row selection, you need to have `enableCellNavigation: true`, `enableRowSelection: true` and `multiSelect: false` and as described earlier, subscribe to `onSelectedRowsChanged` (for that you need to bind to `(gridChanged)`).
-
-**Note:** if you want to change from Multiple Selections to Single Selection (and vice-versa), you could use the grid options `enableCellNavigation` flag, however this is not possible when using Inline Editors since this flag is required. However, there is no other known ways of toggling dynamically.
-
-#### View
-```html
-<angular-slickgrid gridId="grid4"
-      [columns]="columnDefinitions"
-      [options]="gridOptions"
-      [dataset]="dataset"
-      (onSelectedRowsChanged)="onSelectedRowsChanged($event.detail.eventData, $event.detail.args)">
-</angular-slickgrid>
-```
-
-#### Component
-```ts
-this.gridOptions = {
-  enableAutoResize: true,
-  enableCellNavigation: true,
-  enableCheckboxSelector: true,
-  enableRowSelection: true,
-  multiSelect: false,
-}
-
-onSelectedRowsChanged(e, args) {
-  if (Array.isArray(args.rows)) {
-    this.selectedObjects = args.rows.map(idx => {
-      const item = grid.getDataItem(idx);
-      return item.title || '';
-    });
-  }
-}
-```
-
-## Multiple Row Selections
-As for multiple row selections, you need to provide an extra grid option of `rowSelectionOptions` which is an object and within it, you need to disable the `selectActiveRow` flag. The other configurations are the same as a Single Selection, which is to enable `enableCheckboxSelector` and `enableRowSelection`. Then as describe earlier, you will subscribe to `onSelectedRowsChanged` (for that you need to bind to `(gridChanged)`).
-
-#### View
-```html
-<angular-slickgrid gridId="grid4"
-      [columns]="columnDefinitions"
-      [options]="gridOptions"
-      [dataset]="dataset"
-      (onSelectedRowsChanged)="onSelectedRowsChanged($event.detail.eventData, $event.detail.args)">
-</angular-slickgrid>
-```
-
-#### Component
-```typescript
-export class Example1 implements OnInit {
-  ngOnInit() {
-    this.gridOptions = {
-      enableAutoResize: true,
-      enableCellNavigation: true,
-      enableCheckboxSelector: true,
-      enableRowSelection: true,
-      rowSelectionOptions: {
-        // True (Single Selection), False (Multiple Selections)
-        selectActiveRow: false
-      },
-    }
-  }
-
-  onSelectedRowsChanged(e, args) {
-    if (Array.isArray(args.rows)) {
-      // user clicked on the 1st column, multiple checkbox selection
-      console.log('multiple row checkbox selected', event, args);
-    }
-  }
-```
-## Changing Dynamically from Single to Multiple Selections (and vice-versa)
-If you want to change from Multiple Selections to Single Selection (and vice-versa), you could toggle the grid options `enableCellNavigation` flag (`False` when you want Single Selection), however this is not possible when using Inline Editors since this flag is required. Note that there is currently no other ways of toggling dynamically without re-creating the grid.
-
-## Mixing Single & Multiple Row Selections
-SlickGrid is so powerful and customizable, you could if you wish mix the multiple row selections (cell column 1) and single row selection (any other cell click). For that though, you will need to use 2 SlickGrid Events (`onClick` and `onSelectedRowsChanged`). For example we can do it this way:
-
-#### View
-```html
-<angular-slickgrid gridId="grid4"
-      [columns]="columnDefinitions"
-      [options]="gridOptions"
-      [dataset]="dataset"
-      (onSelectedRowsChanged)="onSelectedRowsChanged($event.detail.eventData, $event.detail.args)"
-      (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)">
-</angular-slickgrid>
-```
-
-#### Component
-```typescript
-export class Example1 implements OnInit {
-  onSelectedRowsChanged(e, args) {
-    // user clicked on the 1st column, multiple checkbox selection
-    console.log('multiple row checkbox selected', event, args);
-  }
-
-  onCellClicked(e, args) {
-    // when clicking on any cell, we will make it the new selected row
-    // however, we don't want to interfere with multiple row selection checkbox which is on 1st column cell
-    if (args.cell !== 0) {
-      grid.setSelectedRows([args.row]);
-    }
-  }
-}
-```
-
-## Disable Custom Rows Selections via `selectableOverride`
-You can use `selectableOverride` to provide custom logic to disable certain rows selections, for example the code below will remove the row selection on every second row.
-
-#### Component
-```typescript
-export class Example1 implements OnInit {
-  prepareGrid() {
-    this.gridOptions = {
-      enableRowSelection: true,
-      enableCheckboxSelector: true,
-      checkboxSelector: {
-        // you can override the logic for showing (or not) the expand icon
-        // for example, display the expand icon only on every 2nd row
-        selectableOverride: (row: number, dataContext: any, grid: any) => (dataContext.id % 2 === 1)
-      },
-      multiSelect: false,
-      rowSelectionOptions: {
-        // True (Single Selection), False (Multiple Selections)
-        selectActiveRow: true,
-      },
-    };
-  }
-}
-```
-
-### Disable External Button when having Empty Selection
-When having an external button that you want to work only when there's row selection, there are 2 ways of doing this.
-1. use the `onSelectedRowsChanged` event (via your View in HTML or via ViewModel)
-```html
-<button disabled.bind="isMyButtonDisabled">My Button</button>
-<angular-slickgrid gridId="grid2"
-          [columns]="columnDefinitions"
-          [options]="gridOptions"
-          [dataset]="dataset"
-          (onSelectedRowsChanged)="handleOnSelectedRowsChanged($event.detail.args)">
-</angular-slickgrid>
-```
-```ts
-isMyButtonDisabled = false;
-
-handleOnSelectedRowsChanged(args) {
-  this.isMyButtonDisabled = args?.rows?.length === 0;
-}
-```
-2. use the `onGridStateChanged` event (see [Grid State & Presets](Grid-State-&-Preset.md) Wiki)
-```html
-<button disabled.bind="isMyButtonDisabled">My Button</button>
-<angular-slickgrid gridId="grid2"
-          [columns]="columnDefinitions"
-          [options]="gridOptions"
-          [dataset]="dataset"
-          (onGridStateChanged)="handleOngridStateChanged($event.detail.args)">
-</angular-slickgrid>
-```
-```ts
-isMyButtonDisabled = false;
-
-handleOngridStateChanged(gridState) {
-  if (Array.isArray(gridState?.rowSelection.dataContextIds)) {
-    this.isMassSelectionDisabled = gridState.rowSelection.dataContextIds.length === 0;
-  }
-}
-```
-
-### Change Row Selections
-You can change which row(s) are selected by using the built-in SlickGrid method `setSelectedRows(rowIndexes)` (passing an empty array will clear all selection), however please note that it requires an array of row indexes as you see them in the UI and it won't work that great with Pagination (if that is what you are looking for then take a look at this Stack Overflow [Q&A](https://stackoverflow.com/questions/59629565/want-to-change-gridoption-preselectedrows-row-in-angular-slickgrid-dynamically-o))
-
-```html
-<angular-slickgrid gridId="grid2"
-          [columns]="columnDefinitions"
-          [options]="gridOptions"
-          [dataset]="dataset"
-          (onAngularGridCreated)="angularGridReady($event.detail)">
-</angular-slickgrid>
-```
-
-```ts
-export class Example1 {
-  angularGrid: AngularGridInstance;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-  }
-
-  changeRowSelections() {
-    this.angularGrid.slickGrid.setSelectedRows(rowIndexes);
-
-    // OR providing an empty array will clear the row selection
-    // this.angularGrid.slickGrid.setSelectedRows([]);
-  }
-}
-```
-
-## Troubleshooting
-### Adding a Column dynamically is removing the Row Selection, why is that?
-The reason is because the Row Selection (checkbox) plugin is a special column and Angular-Slickgrid is adding an extra column dynamically for the Row Selection checkbox and that is **not** reflected in your local copy of `columnDefinitions`. To address this issue, you need to get the Angular-Slickgrid internal copy of all columns (including the extra columns), you can get it via `getAllColumnDefinitions()` from the Grid Service and then you can use to that array and that will work.
-
-```html
-<angular-slickgrid gridId="grid17"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)">
-</angular-slickgrid>
-```
-```ts
-angularGridReady(angularGrid: AngularGridInstance) {
-  this.angularGrid = angularGrid;
-}
-
-addNewColumn() {
-  const newColumn = { /*...*/ };
-
-  const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
-  allColumns.push(newColumn);
-  this.columnDefinitions = allColumns.slice(); // or use spread operator [...cols]
-
-  // you could also use SlickGrid setColumns() method
-  // this.angularGrid.slickGrid.setColumns(cols);
-}
-```

package/docs/grid-functionalities/Row-based-edit.md

@@ -1,71 +0,0 @@
-#### index
-- [The action column](#the-action-column)
-- [Multiple Row Selections](#multiple-row-selections)
-- [Change Dynamically Single/Multiple Selections](#changing-dynamically-from-single-to-multiple-selections-and-vice-versa)
-- [Mixing Single & Multiple Row Selections](#mixing-single--multiple-row-selections)
-- [Disable Custom Rows Selections via `selectableOverride`](#disable-custom-rows-selections-via-selectableoverride)
-- [Disable External Button when having Empty Selection](#disable-external-button-when-having-empty-selection)
-- [Change Row Selections](#change-row-selections)
-- Troubleshooting
-  - [Adding a Column dynamically is removing the Row Selection, why is that?](#adding-a-column-dynamically-is-removing-the-row-selection-why-is-that)
-
-### Description
-The Row based editing plugin makes it possible to keep the grid readonly except for rows which the user explicitely toggles into edit mode.
-
-**Note:** This plugin enforces the use of the `autoEdit` option and will turn it on with a console warning if its not already.
-
-### Demo
-[Demo](https://ghiscoding.github.io/Angular-Slickgrid/#/base-row-editing) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-base-row-editing.component.ts)
-
-## The action column
-A new column is rendered that shows an edit/delete button. If the user clicks on edit, a save and cancel button are shown instead and the row toggles into edit mode. By default as the last column but you can override it with the option `columnIndexPosition`. Additionally it's default column id can be overriden using the opiton `columnId`. Furthermore, you can also override the columns label via the `actionsColumnLabel` property.
-
-### Single or multiple editable rows
-By default you can only toggle a single row into edit mode. If you set the option `allowMultipleRows` to `true` on the other hand, you can toggle as many as you want.
-
-### Configuring the action buttons
-You can override the styling, the hover text as well as whether a prompt — and with what text — should be shown. It is done by overriding the `actionButtons` property of the [plugins options](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/interfaces/rowBasedEditOption.interface.ts).
-
-## Support for the Excel Copy Buffer Plugin
-If the [Excel Copy Buffer Plugin](excel-copy-buffer.md) is configured, the Row based editing pluging will override it's behavior by denying pastes on all cells not within a edit mode row. Nevertheless, any existing `BeforePasteCellHandler` will be respected.
-
-## How the plugin works
-The idea of the plugin is to focus the users editing experience on specific individual rows and and save them individually. This is achieved by letting the user toggle one or more rows into edit mode.
-When a that happens a potentially registered `onBeforeEditMode` callback is executed to handle various preparation or cleanup tasks. Now changes can be made to those rows and will be highlighted and tracked. The user may cancel the edit mode at any time and revert all cells changes. If the save button is pressed on the other hand an `onBeforeRowUpdated` hook, which you define via plugin options, is called and expects a `Promise<boolean>`. In that method you'd typically write the changes to your backend and return either true or false based on the operations outcome. If a negative boolean is returned the edit mode is kept, otherwise the row applies the changes and toggles back into readonly mode. That means, no modifications can be done on the grid.
-
-Here's the respective code shown in Example22:
-
-#### ViewModel
-```ts
-onBeforeRowUpdated(args) {
-  const { effortDriven, percentComplete, finish, start, duration, title } = args.dataContext;
-
-  if (duration > 40) {
-    alert('Sorry, 40 is the maximum allowed duration.');
-    return Promise.resolve(false);
-  }
-
-  return fakeFetch('your-backend-api/endpoint', {
-    method: 'POST',
-    body: JSON.stringify({ effortDriven, percentComplete, finish, start, duration, title }),
-    headers: {
-      'Content-type': 'application/json; charset=UTF-8'
-    }
-  }).catch(err => {
-    console.error(err);
-    return false;
-  })
-  .then(response => {
-    if (response === false) {  // <---- the negative response, e.g validation failed, keep the row as is
-      return false;
-    }
-    if (typeof response === 'object') {
-      return response!.json();
-    }
-  })
-  .then(json => {
-    alert(json.message);
-    return true;  // <--- all good, apply changes in grid and toggle row into readonly mode
-  });
-},
-```