@progress/kendo-angular-grid 12.0.0-develop.8 → 12.0.0

package/esm2020/databinding.directive.mjs

@@ -7,19 +7,27 @@ import { process } from '@progress/kendo-data-query';
 import { GridComponent } from './grid.component';
 import { anyChanged, isPresent } from './utils';
 import { LocalDataChangesService } from './editing/local-data-changes.service';
+import { RowReorderService } from './row-reordering/row-reorder.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./grid.component";
 import * as i2 from "./editing/local-data-changes.service";
+import * as i3 from "./row-reordering/row-reorder.service";
 /**
  * A directive which encapsulates the in-memory handling of data operations such as [paging]({% slug paging_grid %}),
  * [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %})
  * ([more information and examples]({% slug local_data_grid %}#toc-using-the-data-binding-directive)).
+ *
+  * @example
+ * ```html
+ * <kendo-grid [kendoGridBinding]="gridData" ...></kendo-grid>
+ * ```
  */
 export class DataBindingDirective {
-    constructor(grid, changeDetector, localDataChangesService) {
+    constructor(grid, changeDetector, localDataChangesService, rowReorderService) {
         this.grid = grid;
         this.changeDetector = changeDetector;
         this.localDataChangesService = localDataChangesService;
+        this.rowReorderService = rowReorderService;
         this.state = {
             skip: 0
         };
@@ -30,12 +38,16 @@ export class DataBindingDirective {
     }
     /**
      * Defines the number of records that will be skipped by the pager.
+     * @default 0
      */
     set skip(value) {
         if (!isPresent(value)) {
             value = 0;
         }
         this.grid.skip = this.state.skip = value;
+        if (this.rowReorderService) {
+            this.rowReorderService.skip = value;
+        }
     }
     /**
      * Defines the descriptors by which the data will be sorted.
@@ -79,6 +91,11 @@ export class DataBindingDirective {
         this.stateChangeSubscription = this.grid
             .dataStateChange
             .subscribe(this.onStateChange.bind(this));
+        if (this.rowReorderService) {
+            this.rowReorderSubscription = this.grid
+                .rowReorder
+                .subscribe(this.onRowReorder.bind(this));
+        }
     }
     /**
      * @hidden
@@ -90,6 +107,9 @@ export class DataBindingDirective {
         if (this.dataChangedSubscription) {
             this.dataChangedSubscription.unsubscribe();
         }
+        if (this.rowReorderSubscription) {
+            this.rowReorderSubscription.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -111,6 +131,13 @@ export class DataBindingDirective {
         this.applyState(state);
         this.rebind();
     }
+    /**
+     * @hidden
+     */
+    onRowReorder(ev) {
+        this.rowReorderService.reorderRows(ev, this.originalData);
+        this.rebind();
+    }
     /**
      * @hidden
      */
@@ -143,14 +170,14 @@ export class DataBindingDirective {
         this.dataChanged = false;
     }
 }
-DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }, { token: i3.RowReorderService }], target: i0.ɵɵFactoryTarget.Directive });
 DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: { skip: "skip", sort: "sort", filter: "filter", pageSize: "pageSize", group: "group", data: ["kendoGridBinding", "data"] }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridBinding]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }]; }, propDecorators: { skip: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }, { type: i3.RowReorderService }]; }, propDecorators: { skip: [{
                 type: Input
             }], sort: [{
                 type: Input

package/esm2020/editing/add-command.directive.mjs

@@ -19,7 +19,7 @@ import * as i4 from "@angular/common";
  * ([see example]({% slug basics_editing_grid %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *    <ng-template kendoGridToolbarTemplate>
  *       <button kendoGridAddCommand>Add new</button>

package/esm2020/editing/cancel-command.directive.mjs

@@ -14,28 +14,16 @@ import * as i3 from "@progress/kendo-angular-icons";
 import * as i4 from "@angular/common";
 /**
  * Represents the `cancel` command of the Grid. You can apply this directive to any `button`
- * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
+ * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
+ * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
  * When an associated button with the directive is clicked, the
  * [cancel]({% slug api_grid_gridcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug basics_editing_grid %})).
- *
- * > When the row is not in the edit mode, the button with the `kendoGridCancelCommand` is automatically hidden.
- *
- * @example
- * ```html-no-run
- * <kendo-grid>
- *   <kendo-grid-command-column title="command">
- *     <ng-template kendoGridCellTemplate>
- *       <button kendoGridCancelCommand>Cancel changes</button>
- *     </ng-template>
- *   </kendo-grid-command-column>
- * </kendo-grid>
- * ```
+ * is triggered. When the row is not in the edit mode, the button with the `kendoGridCancelCommand` is automatically hidden.
  *
  * You can control the content of the button based on the state of the row.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *   <kendo-grid-command-column title="command">
  *     <ng-template kendoGridCellTemplate let-isNew="isNew">

package/esm2020/editing/edit-template.directive.mjs

@@ -5,13 +5,12 @@
 import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the column edit-cell template of the Grid ([see example]({% slug inline_editing_grid %}#toc-using-reactive-forms)).
+ * Represents the column edit-cell template of the Grid ([see example](slug:custom_reactive_editing_grid#toc-setting-up-custom-inputs)).
  * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
  * tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag.
  *
  * The template context is set to the current form group and the following additional fields are passed:
- * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']).
- * Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-formGroup`.
+ * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']). Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-formGroup`.
  * If you use the Grid inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
  * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex` is `-1`. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
  * - `dataItem`&mdash;The current data item. Use it as an alias for a template variable by utilizing the `let-dataItem="dataItem"` syntax.

package/esm2020/editing/remove-command.directive.mjs

@@ -14,15 +14,15 @@ import * as i3 from "@progress/kendo-angular-icons";
 import * as i4 from "@angular/common";
 /**
  * Represents the `remove` command of the Grid. You can apply this directive to any `button` element
- * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
+ * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
+ * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
  * When an associated button with the directive is clicked, the
- * [remove event]({% slug api_grid_gridcomponent %}#toc-remove)
- * is triggered ([see example]({% slug inline_editing_grid %}#toc-using-reactive-forms))).
- *
- * > When the row is in the edit mode, the button with the `kendoGridRemoveCommand` is automatically hidden.
+ * [remove]({% slug api_grid_gridcomponent %}#toc-remove) event
+ * is triggered.
+ * When the row is in the edit mode, the button with the `kendoGridRemoveCommand` is automatically hidden.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *   <kendo-grid-command-column title="command">
  *     <ng-template kendoGridCellTemplate>

package/esm2020/editing/save-command.directive.mjs

@@ -14,23 +14,11 @@ import * as i3 from "@progress/kendo-angular-icons";
 import * as i4 from "@angular/common";
 /**
  * Represents the `save` command of the Grid. You can apply this directive to any `button`
- * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
+ * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
+ * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
  * When an associated button with the directive is clicked, the
  * [save]({% slug api_grid_gridcomponent %}#toc-save) event
- * is triggered ([see example]({% slug basics_editing_grid %})).
- *
- * > When the row is not in the edit mode, the button with `kendoGridSaveCommand` is automatically hidden.
- *
- * @example
- * ```html-no-run
- * <kendo-grid>
- *   <kendo-grid-command-column title="command">
- *     <ng-template kendoGridCellTemplate>
- *       <button kendoGridSaveCommand>Save changes</button>
- *     </ng-template>
- *   </kendo-grid-command-column>
- * </kendo-grid>
- * ```
+ * is triggered. When the row is not in the edit mode, the button with `kendoGridSaveCommand` is automatically hidden.
  *
  * You can control the content of the button based on the state of the row.
  *

package/esm2020/editing-directives/in-cell-editing.directive.mjs

@@ -13,7 +13,7 @@ import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
  * A directive which encapsulates the editing operations of the Grid when using the in-cell
- * editing with Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-the-incell-directive)).
+ * editing with Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
  */
 export class InCellEditingDirective extends EditingDirectiveBase {
     constructor(grid, localDataChangesService, cdr) {

package/esm2020/editing-directives/template-editing.directive.mjs

@@ -11,7 +11,7 @@ import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
  * A directive which encapsulates the editing operations of the Grid when using
- * the Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-the-template-directive)).
+ * the Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
  */
 export class TemplateEditingDirective extends RowEditingDirectiveBase {
     constructor(grid, localDataChangesService) {

package/esm2020/excel/excel-command.directive.mjs

@@ -14,13 +14,13 @@ import * as i4 from "@angular/common";
 /**
  * Represents the `export-to-Excel` command of the Grid. You can apply this
  * directive to any `button` element inside a
- * [ToolbarTemplate]({% slug api_grid_commandcolumncomponent %}).
+ * [ToolbarTemplate]({% slug api_grid_toolbartemplatedirective %}).
  * When the user clicks a button associated with the directive, the
  * [excelExport]({% slug api_grid_gridcomponent %}#toc-excelexport) event
  * fires ([see example]({% slug excelexport_grid %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *      <ng-template kendoGridToolbarTemplate>
  *          <button kendoGridExcelCommand>Export to PDF</button>

package/esm2020/excel/excel.module.mjs

@@ -15,29 +15,19 @@ const declarations = [ExcelComponent, ExcelCommandDirective];
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Grid and Excel modules
- * import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```ts
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from "@angular/platform-browser";
+ * import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
  * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, GridModule, ExcelModule], // import Grid and Excel modules
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, GridModule, ExcelModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
  *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export class ExcelModule {