diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index f4392f78..a4158e5c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -30,7 +30,6 @@ import { GridLocalizationComponent } from './examples/grid-localization.componen 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'; @@ -40,7 +39,7 @@ 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 { Grid43Component } from './examples/grid43.component'; +import { Grid18Component } from './examples/grid18.component'; import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component'; import { NgModule } from '@angular/core'; @@ -59,7 +58,7 @@ const routes: Routes = [ { path: 'context', component: GridContextMenuComponent }, { path: 'custom-pagination', component: GridCustomPaginationComponent }, { path: 'custom-tooltip', component: GridCustomTooltipComponent }, - { path: 'csv-grid', component: Grid43Component }, + { path: 'csv-grid', component: Grid18Component }, { path: 'drag-recycle', component: GridDragRecycleComponent }, { path: 'editor', component: GridEditorComponent }, { path: 'excel-formula', component: GridExcelFormulaComponent }, @@ -83,7 +82,6 @@ const routes: Routes = [ { path: 'clientside', component: GridClientSideComponent }, { path: 'odata', component: GridOdataComponent }, { path: 'range', component: GridRangeComponent }, - { path: 'remote', component: GridRemoteComponent }, { path: 'resize-by-content', component: GridResizeByContentComponent }, { path: 'rowdetail', component: GridRowDetailComponent }, { path: 'rowmove', component: GridRowMoveComponent }, diff --git a/src/app/app.component.html b/src/app/app.component.html index 2589121c..7ac0520e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -92,7 +92,7 @@ 17- Row Move
  • - 18- Remote Model + 18- Create Grid from CSV
  • 19- Draggable Grouping @@ -174,9 +174,6 @@
  • 42- Custom Pagination
    • -
  • - 43- Create Grid from CSV -
    • diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c714c959..8f75ea11 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -46,7 +46,6 @@ import { GridLocalizationComponent } from './examples/grid-localization.componen 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'; @@ -56,7 +55,7 @@ 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 { Grid43Component } from './examples/grid43.component'; +import { Grid18Component } from './examples/grid18.component'; import { HomeComponent } from './examples/home.component'; import { CustomPagerComponent } from './examples/grid-custom-pager.component'; import { RowDetailPreloadComponent } from './examples/rowdetail-preload.component'; @@ -136,7 +135,6 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj GridMenuComponent, GridOdataComponent, GridRangeComponent, - GridRemoteComponent, GridResizeByContentComponent, GridRowDetailComponent, GridRowMoveComponent, @@ -146,7 +144,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj GridTradingComponent, GridTreeDataParentChildComponent, GridTreeDataHierarchicalComponent, - Grid43Component, + Grid18Component, RowDetailPreloadComponent, RowDetailViewComponent, SwtCommonGridTestComponent, diff --git a/src/app/examples/grid-remote.component.html b/src/app/examples/grid-remote.component.html deleted file mode 100644 index 55aa0a50..00000000 --- a/src/app/examples/grid-remote.component.html +++ /dev/null @@ -1,44 +0,0 @@ -
    -

    - {{ title }} - - - code - - -

    -
    - -
    - - -
    - - - - - - - -
    diff --git a/src/app/examples/grid-remote.component.ts b/src/app/examples/grid-remote.component.ts deleted file mode 100644 index 2320242a..00000000 --- a/src/app/examples/grid-remote.component.ts +++ /dev/null @@ -1,169 +0,0 @@ -// import 'slickgrid/slick.remotemodel'; // SlickGrid Remote Plugin - -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { AngularGridInstance, Column, Formatter, GridOption, SlickEventHandler } from './../modules/angular-slickgrid'; - -const brandFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => { - return (dataContext && dataContext.brand && dataContext.brand.name) || ''; -}; - -const mpnFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => { - let link = ''; - if (dataContext && dataContext.octopart_url && dataContext.mpn) { - link = `${dataContext.mpn}`; - } - return link; -}; - -@Component({ - templateUrl: './grid-remote.component.html', -}) -export class GridRemoteComponent implements OnDestroy, OnInit { - private _eventHandler: any = new SlickEventHandler(); - - title = 'Example 18: Octopart Catalog Search - Remote Model Plugin'; - subTitle = ` - This example demonstrates how to use "slick.remotemodel.js" or any Remote implementation through an external Remote Service - - `; - - angularGrid!: AngularGridInstance; - columnDefinitions!: Column[]; - customDataView: any; - gridObj: any; - gridOptions!: GridOption; - dataset = []; - loaderDataView: any; - loading = false; // spinner when loading data - search = ''; - - constructor() { - // this.loaderDataView = new Slick.Data.RemoteModel(); - // this.customDataView = this.loaderDataView && this.loaderDataView.data; - } - - angularGridReady(angularGrid: AngularGridInstance) { - this.angularGrid = angularGrid; - this.gridObj = angularGrid.slickGrid; // grid object - this.loaderDataView?.setSort('score', -1); - this.gridObj?.setSortColumn('score', false); - - // notify of a change to preload the first page - this.gridObj.onViewportChanged.notify(); - } - - ngOnDestroy() { - // unsubscribe all SlickGrid events - this._eventHandler.unsubscribeAll(); - } - - ngOnInit(): void { - this.defineGrid(); - this.hookAllLoaderEvents(); - - // set default search - // this.search = 'switch'; - // this.loaderDataView.setSearch(this.search); - } - - defineGrid() { - this.columnDefinitions = [ - { id: 'mpn', name: 'MPN', field: 'mpn', formatter: mpnFormatter, width: 100, sortable: true }, - { id: 'brand', name: 'Brand', field: 'brand.name', formatter: brandFormatter, width: 100, sortable: true }, - { id: 'short_description', name: 'Description', field: 'short_description', width: 520 }, - ]; - - this.gridOptions = { - enableAutoResize: true, - autoResize: { - container: '#demo-container', - rightPadding: 10, - }, - enableCellNavigation: true, - enableColumnReorder: false, - enableGridMenu: false, - multiColumnSort: false, - }; - } - - hookAllLoaderEvents() { - if ( - this._eventHandler && - this._eventHandler.subscribe && - this.loaderDataView && - this.loaderDataView.onDataLoading && - this.loaderDataView.onDataLoaded - ) { - this._eventHandler.subscribe(this.loaderDataView.onDataLoading, (_e: Event, _args: any) => { - this.loading = true; - }); - - this._eventHandler.subscribe(this.loaderDataView.onDataLoaded, (_e: Event, args: any) => { - if (args && this.gridObj && this.gridObj.invalidateRow && this.gridObj.updateRowCount && this.gridObj.render) { - for (let i = args.from; i <= args.to; i++) { - this.gridObj.invalidateRow(i); - } - this.gridObj.updateRowCount(); - this.gridObj.render(); - this.loading = false; - } - }); - } - } - - onSort(_e: Event, args: any) { - if ( - this.gridObj && - this.gridObj.getViewport && - this.loaderDataView && - this.loaderDataView.ensureData && - this.loaderDataView.setSort - ) { - const vp = this.gridObj.getViewport(); - if (args && args.sortCol && args.sortCol.field) { - this.loaderDataView.setSort(args.sortCol.field, args.sortAsc ? 1 : -1); - } - this.loaderDataView.ensureData(vp.top, vp.bottom); - } - } - - onViewportChanged() { - if (this.gridObj && this.gridObj.getViewport && this.loaderDataView && this.loaderDataView.ensureData) { - const vp = this.gridObj.getViewport(); - this.loaderDataView.ensureData(vp.top, vp.bottom); - } - } - - searchChanged(newValue: string) { - if ( - newValue && - this.gridObj && - this.gridObj.getViewport && - this.loaderDataView && - this.loaderDataView.ensureData && - this.loaderDataView.setSearch - ) { - const vp = this.gridObj.getViewport(); - this.loaderDataView.setSearch(newValue); - this.loaderDataView.ensureData(vp.top, vp.bottom); - } - } -} diff --git a/src/app/examples/grid43.component.html b/src/app/examples/grid18.component.html similarity index 88% rename from src/app/examples/grid43.component.html rename to src/app/examples/grid18.component.html index c2b7ddd3..46df1682 100644 --- a/src/app/examples/grid43.component.html +++ b/src/app/examples/grid18.component.html @@ -1,11 +1,11 @@

    - Example 43: Dynamically Create Grid from CSV / Excel import + Example 18: Dynamically Create Grid from CSV / Excel import code @@ -45,8 +45,7 @@

    -  / - +

    @@ -54,7 +53,7 @@

    { const content = e.target.result; this.dynamicallyCreateGrid(content); }; reader.readAsText(file); - } else { - alert('File must be a CSV file'); } } diff --git a/test/cypress/e2e/example43.cy.ts b/test/cypress/e2e/example18.cy.ts similarity index 97% rename from test/cypress/e2e/example43.cy.ts rename to test/cypress/e2e/example18.cy.ts index 30885dd5..270bad03 100644 --- a/test/cypress/e2e/example43.cy.ts +++ b/test/cypress/e2e/example18.cy.ts @@ -1,10 +1,10 @@ -describe('Example 43 - Dynamically Create Grid from CSV / Excel import', () => { +describe('Example 18 - Dynamically Create Grid from CSV / Excel import', () => { const defaultCsvTitles = ['First Name', 'Last Name', 'Age', 'Type']; const GRID_ROW_HEIGHT = 33; it('should display Example title', () => { cy.visit(`${Cypress.config('baseUrl')}/csv-grid`); - cy.get('h2').should('contain', 'Example 43: Dynamically Create Grid from CSV / Excel import'); + cy.get('h2').should('contain', 'Example 18: Dynamically Create Grid from CSV / Excel import'); }); it('should load default CSV file and expect default column titles', () => {