angular-slickgrid 4.1.4 → 4.2.0

package/src/app/app.component.html

@@ -0,0 +1,160 @@
+<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+  <a class="navbar-brand ms-2" href="https://github.com/ghiscoding/Angular-Slickgrid">
+    <i class="fa fa-github"></i>
+    <span>{{title}}</span>
+  </a>
+  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarContent"
+          aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="navbar-collapse collapse" id="navbarContent">
+    <ul class="navbar-nav mr-auto">
+      <li>
+        <span class="github-button-container">
+          <a href="https://github.com/ghiscoding/angular-slickgrid">
+            <img src="https://img.shields.io/github/stars/ghiscoding/angular-slickgrid?style=social">
+          </a>
+        </span>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" [routerLink]="['/home']">
+          <i class="fa fa-lg fa-home"></i> Home
+        </a>
+      </li>
+    </ul>
+  </div>
+</nav>
+
+<div class="container-fluid">
+  <div class="panel-wm">
+    <section id="panel-left" class="panel-wm-left">
+      <ul class="well nav nav-pills nav-stacked">
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/basic']">1- Basic Grid / 2 Grids</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/formatter']">2- Formatters</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/editor']">3- Editors</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/clientside']">4- Client Side Sort/Filter</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/odata']">5- Backend Server with OData</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/gridgraphql']">6- Backend Server with
+            GraphQL</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/headerbutton']">7- Header Button Plugin</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/headermenu']">8- Header Menu Plugin</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/gridmenu']">9- Grid Menu (hamburger menu)</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/selection']">10- Row Selection / 2 Grids</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/additem']">11- Add/Update/Highlight Datagrid
+            Item</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/localization']">12- Localization (i18n)</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/swt']">13- Backend Server Custom Paging</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/grouping']">14- Grouping &amp; Aggregator</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/colspan']">15- Column Span</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/gridstate']">16- Grid State &amp; Local
+            Storage</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowmove']">17- Row Move</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/remote']">18- Remote Model</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/draggrouping']">19- Draggable Grouping</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/frozen']">20- Frozen Columns/Rows</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/rowdetail']">21- Row Detail View</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/angular-components']">22- Use of Angular
+            Components</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/autoheight']">23- Grid AutoHeight (full
+            height)</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/gridtabs']">24- within Bootstrap Tabs</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/range']">25- Filter by Range of Values</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/context']">26- Cell & Context Menu</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/graphql-nopage']">
+            27- GraphQL without Pagination
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/tree-data-parent-child']">
+            28- Tree Data (Parent/Child)
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/tree-data-hierarchical']">
+            29- Tree Data (Hierarchical)
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/composite-editor']">
+            30- Composite Editor Modal
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/resize-by-content']">
+            31- Resize by Cell Content
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/custom-tooltip']">
+            32- Regular & Custom Tooltip
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/trading']">
+            33- Real-Time Trading Platform
+          </a>
+        </li>
+      </ul>
+    </section>
+
+    <section class="panel-wm-content">
+      <div id="demo-container">
+        <router-outlet></router-outlet>
+      </div>
+    </section>
+  </div>
+</div>

package/src/app/app.component.scss

@@ -0,0 +1,65 @@
+$navbar-height: 56px;
+$side-menu-width: 250px;
+
+.body-content {
+  margin-top: $navbar-height;
+}
+.lightblue {
+  color: lightblue;
+}
+.red {
+  color: red;
+}
+.faded {
+    opacity: 0.2;
+}
+.faded:hover {
+    opacity: 0.5;
+}
+
+section {
+  margin: 0;
+}
+
+/** Sidebar (left) and Content (right) */
+@media (min-width: 1200px) {
+  .panel-wm-content .container {
+      width: calc(1170px - #{$side-menu-width});
+  }
+}
+
+.panel-wm {
+  padding-top: $navbar-height;
+
+  .nav-stacked {
+    padding-bottom: 30px;
+
+    .nav-item {
+      width: 100%;
+    }
+  }
+
+  .nav > li > a {
+    padding: 10px 15px;
+    border-radius: 0;
+  }
+
+  .panel-wm-content {
+    padding-left: ($side-menu-width + 5px);
+    padding-right: 15px;
+  }
+
+  .panel-wm-left {
+    position: fixed;
+    z-index: 400;
+    transition: left 0.15s;
+    top: calc(#{$navbar-height});
+    bottom: 0;
+    left: 0;
+    background-color: #f5f5f5;
+    transform: translate3d(0, 0, 0);
+    border-right: 1px solid #d0d0d0;
+    overflow-y: auto;
+    width: $side-menu-width;
+  }
+}

package/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'Angular-SlickGrid';
+}

package/src/app/app.module.ts

@@ -0,0 +1,175 @@
+import { AppRoutingRoutingModule } from './app-routing.module';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { Injector, APP_INITIALIZER, NgModule } from '@angular/core';
+import { LOCATION_INITIALIZED } from '@angular/common';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { TabsModule } from 'ngx-bootstrap/tabs';
+import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+import { AppComponent } from './app.component';
+import { CustomTitleFormatterComponent } from './examples/custom-titleFormatter.component';
+import { EditorNgSelectComponent } from './examples/editor-ng-select.component';
+import { FilterNgSelectComponent } from './examples/filter-ng-select.component';
+import { GridAddItemComponent } from './examples/grid-additem.component';
+import { GridAutoHeightComponent } from './examples/grid-autoheight.component';
+import { GridBasicComponent } from './examples/grid-basic.component';
+import { GridClientSideComponent } from './examples/grid-clientside.component';
+import { GridColspanComponent } from './examples/grid-colspan.component';
+import { GridContextMenuComponent } from './examples/grid-contextmenu.component';
+import { GridCompositeEditorComponent } from './examples/grid-composite-editor.component';
+import { GridCustomTooltipComponent } from './examples/grid-custom-tooltip.component';
+import { GridDraggableGroupingComponent } from './examples/grid-draggrouping.component';
+import { GridEditorComponent } from './examples/grid-editor.component';
+import { GridAngularComponent } from './examples/grid-angular.component';
+import { GridFormatterComponent } from './examples/grid-formatter.component';
+import { GridFrozenComponent } from './examples/grid-frozen.component';
+import { GridGraphqlComponent } from './examples/grid-graphql.component';
+import { GridGraphqlWithoutPaginationComponent } from './examples/grid-graphql-nopage.component';
+import { GridGroupingComponent } from './examples/grid-grouping.component';
+import { GridHeaderButtonComponent } from './examples/grid-headerbutton.component';
+import { GridHeaderMenuComponent } from './examples/grid-headermenu.component';
+import { GridLocalizationComponent } from './examples/grid-localization.component';
+import { GridMenuComponent } from './examples/grid-menu.component';
+import { GridOdataComponent } from './examples/grid-odata.component';
+import { GridRangeComponent } from './examples/grid-range.component';
+import { GridRemoteComponent } from './examples/grid-remote.component';
+import { GridResizeByContentComponent } from './examples/grid-resize-by-content.component';
+import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
+import { GridRowMoveComponent } from './examples/grid-rowmove.component';
+import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
+import { GridStateComponent } from './examples/grid-state.component';
+import { GridTabsComponent } from './examples/grid-tabs.component';
+import { GridTradingComponent } from './examples/grid-trading.component';
+import { GridTreeDataHierarchicalComponent } from './examples/grid-tree-data-hierarchical.component';
+import { GridTreeDataParentChildComponent } from './examples/grid-tree-data-parent-child.component';
+import { HomeComponent } from './examples/home.component';
+import { RowDetailPreloadComponent } from './examples/rowdetail-preload.component';
+import { RowDetailViewComponent } from './examples/rowdetail-view.component';
+
+import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
+import { SwtCommonGridPaginationComponent } from './examples/swt-common-grid-pagination.component';
+import { SwtCommonGridComponent } from './examples/swt-common-grid.component';
+
+// import our custom module, library created using this article
+// https://medium.com/@ngl817/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
+import { AngularSlickgridModule } from './modules/angular-slickgrid/modules/angular-slickgrid.module';
+// import { SlickgridModule } from 'angular-slickgrid';
+
+// load necessary Flatpickr Locale(s), but make sure it's imported AFTER the SlickgridModule import
+import 'flatpickr/dist/l10n/fr';
+
+// AoT requires an exported function for factories
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+// use an Initializer Factory as describe here: https://github.com/ngx-translate/core/issues/517#issuecomment-299637956
+export function appInitializerFactory(translate: TranslateService, injector: Injector) {
+  return () => new Promise<any>((resolve: any) => {
+    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
+    locationInitialized.then(() => {
+      const langToSet = 'en';
+      translate.setDefaultLang('en');
+      translate.use(langToSet).subscribe({
+        next: () => {
+          // console.info(`Successfully initialized '${langToSet}' language.'`);
+        },
+        error: () => console.error(`Problem with '${langToSet}' language initialization.'`),
+        complete: () => resolve(null)
+      });
+    });
+  });
+}
+
+// @dynamic
+@NgModule({
+  declarations: [
+    AppComponent,
+    CustomTitleFormatterComponent,
+    EditorNgSelectComponent,
+    FilterNgSelectComponent,
+    GridAddItemComponent,
+    GridAngularComponent,
+    GridAutoHeightComponent,
+    GridBasicComponent,
+    GridClientSideComponent,
+    GridColspanComponent,
+    GridCompositeEditorComponent,
+    GridContextMenuComponent,
+    GridCustomTooltipComponent,
+    GridDraggableGroupingComponent,
+    GridEditorComponent,
+    GridFormatterComponent,
+    GridFrozenComponent,
+    GridGraphqlComponent,
+    GridGraphqlWithoutPaginationComponent,
+    GridGroupingComponent,
+    GridHeaderButtonComponent,
+    GridHeaderMenuComponent,
+    GridLocalizationComponent,
+    GridMenuComponent,
+    GridOdataComponent,
+    GridRangeComponent,
+    GridRemoteComponent,
+    GridResizeByContentComponent,
+    GridRowDetailComponent,
+    GridRowMoveComponent,
+    GridRowSelectionComponent,
+    GridStateComponent,
+    GridTabsComponent,
+    GridTradingComponent,
+    GridTreeDataParentChildComponent,
+    GridTreeDataHierarchicalComponent,
+    RowDetailPreloadComponent,
+    RowDetailViewComponent,
+    SwtCommonGridTestComponent,
+    SwtCommonGridPaginationComponent,
+    SwtCommonGridComponent,
+    HomeComponent
+  ],
+  imports: [
+    AppRoutingRoutingModule,
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    NgSelectModule,
+    TabsModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    }),
+    AngularSlickgridModule.forRoot({
+      // add any Global Grid Options/Config you might want
+      // to avoid passing the same options over and over in each grids of your App
+      enableAutoResize: true,
+      autoResize: {
+        container: '#grid-container',
+        rightPadding: 10
+      }
+    })
+  ],
+  entryComponents: [
+    // dynamically created components
+    CustomTitleFormatterComponent,
+    EditorNgSelectComponent,
+    FilterNgSelectComponent,
+    RowDetailPreloadComponent,
+    RowDetailViewComponent,
+  ],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitializerFactory,
+      deps: [TranslateService, Injector],
+      multi: true
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

package/src/app/examples/custom-angularComponentEditor.ts

@@ -0,0 +1,184 @@
+import { ComponentRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import {
+  AngularUtilService,
+  Column,
+  ColumnEditor,
+  Editor,
+  EditorValidator,
+  EditorValidationResult,
+  GridOption,
+  SlickGrid,
+  unsubscribeAllObservables,
+} from './../modules/angular-slickgrid';
+
+/*
+ * An example of a 'detached' editor.
+ * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
+ */
+export class CustomAngularComponentEditor implements Editor {
+  private _subscriptions: Subscription[] = [];
+
+  /** Angular Component Reference */
+  componentRef!: ComponentRef<any>;
+
+  /** default item Id */
+  defaultId = '';
+
+  /** default item object */
+  defaultItem: any;
+
+  /** SlickGrid grid object */
+  grid: SlickGrid;
+
+  constructor(private args: any) {
+    this.grid = args && args.grid;
+    this.init();
+  }
+
+  /** Angular Util Service (could be inside the Grid Options Params or the Editor Params ) */
+  get angularUtilService(): AngularUtilService {
+    let angularUtilService = this.gridOptions && this.gridOptions.params && this.gridOptions.params.angularUtilService;
+    if (!angularUtilService || !(angularUtilService instanceof AngularUtilService)) {
+      angularUtilService = this.columnEditor && this.columnEditor.params && this.columnEditor.params.angularUtilService;
+    }
+    return angularUtilService;
+  }
+
+  /** Get the Collection */
+  get collection(): any[] {
+    return this.columnDef && this.columnDef.internalColumnEditor!.collection || [];
+  }
+
+  /** Get Column Definition object */
+  get columnDef(): Column {
+    return this.args && this.args.column || {};
+  }
+
+  /** Get Column Editor object */
+  get columnEditor(): ColumnEditor {
+    return this.columnDef && this.columnDef.internalColumnEditor || {};
+  }
+
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return this.grid?.getOptions?.() as GridOption;
+  }
+
+  get hasAutoCommitEdit(): boolean {
+    return this.gridOptions.autoCommitEdit ?? false;
+  }
+
+  /** Get the Validator function, can be passed in Editor property or Column Definition */
+  get validator(): EditorValidator | undefined {
+    return this.columnEditor.validator || this.columnDef.validator;
+  }
+
+  init() {
+    if (!this.columnEditor || !this.columnEditor.params.component || !(this.angularUtilService instanceof AngularUtilService)) {
+      throw new Error(`[Angular-Slickgrid] For Editor with Angular Component to work properly, you need to provide your component to the "component" property and make sure to add it to your "entryComponents" array.
+      You also need to provide the "AngularUtilService" via the Editor Params OR the Grid Options Params
+      Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomAngularComponentEditor, collection: [...], params: { component: MyComponent, angularUtilService: this.angularUtilService }}];
+      OR this.columnDefs = [{ id: 'title', field: 'title', editor: { model: CustomAngularComponentEditor, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
+    }
+    if (this.columnEditor && this.columnEditor.params.component) {
+      const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this.columnEditor.params.component, this.args.container);
+      this.componentRef = componentOutput && componentOutput.componentRef;
+
+      // here we override the collection object of the Angular Component
+      // but technically you can pass any values you wish to your Component
+      Object.assign(this.componentRef.instance, { collection: this.collection });
+
+      // when our model (item object) changes, we'll call a save of the slickgrid editor
+      this._subscriptions.push(
+        this.componentRef.instance.onItemChanged.subscribe((item: any) => this.save())
+      );
+    }
+  }
+
+  save() {
+    const validation = this.validate();
+    if (validation && validation.valid) {
+      if (this.hasAutoCommitEdit) {
+        this.args.grid.getEditorLock().commitCurrentEdit();
+      } else {
+        this.args.commitChanges();
+      }
+    }
+  }
+
+  cancel() {
+    this.componentRef.instance.selectedId = this.defaultId;
+    this.componentRef.instance.selectedItem = this.defaultItem;
+    if (this.args && this.args.cancelChanges) {
+      this.args.cancelChanges();
+    }
+  }
+
+  /** optional, implement a hide method on your Angular Component */
+  hide() {
+    if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.hide === 'function') {
+      this.componentRef.instance.hide();
+    }
+  }
+
+  /** optional, implement a show method on your Angular Component */
+  show() {
+    if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.show === 'function') {
+      this.componentRef.instance.show();
+    }
+  }
+
+  /** destroy the Angular Component & Subscription */
+  destroy() {
+    if (this.componentRef && this.componentRef.destroy) {
+      this.componentRef.destroy();
+    }
+
+    // also unsubscribe all Angular Subscriptions
+    this._subscriptions = unsubscribeAllObservables(this._subscriptions);
+  }
+
+  /** optional, implement a focus method on your Angular Component */
+  focus() {
+    if (this.componentRef && this.componentRef.instance && typeof this.componentRef.instance.focus === 'function') {
+      this.componentRef.instance.focus();
+    }
+  }
+
+  applyValue(item: any, state: any) {
+    item[this.columnDef.field] = state;
+  }
+
+  getValue() {
+    return this.componentRef.instance.selectedId;
+  }
+
+  loadValue(item: any) {
+    const itemObject = item && item[this.columnDef.field];
+    this.componentRef.instance.selectedId = itemObject && itemObject.id || '';
+    this.componentRef.instance.selectedItem = itemObject && itemObject;
+  }
+
+  serializeValue(): any {
+    return this.componentRef.instance.selectedItem;
+  }
+
+  isValueChanged() {
+    return (!(this.componentRef.instance.selectedId === '' && (this.defaultId === null || this.defaultId === undefined))) && (this.componentRef.instance.selectedId !== this.defaultId);
+  }
+
+  validate(): EditorValidationResult {
+    if (this.validator) {
+      const value = this.componentRef.instance.selectedId;
+      return this.validator(value, this.args);
+    }
+
+    // by default the editor is always valid
+    // if user want it to be required, he would have to provide his own validator
+    return {
+      valid: true,
+      msg: null
+    };
+  }
+}