angular-slickgrid 4.2.0 → 4.2.3

package/src/app/examples/grid-rowselection.component.ts

@@ -1,267 +0,0 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-
-import {
-  AngularGridInstance,
-  Column,
-  FieldType,
-  Filters,
-  Formatters,
-  GridOption,
-  GridStateChange
-} from './../modules/angular-slickgrid';
-
-@Component({
-  templateUrl: './grid-rowselection.component.html',
-  styles: ['.alert { padding: 8px; margin-bottom: 10px }', '.col-sm-1{ max-width: 70px }'],
-})
-export class GridRowSelectionComponent implements OnInit {
-  title = 'Example 10: Multiple Grids with Row Selection';
-  subTitle = `
-    Row selection, single or multi-select (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Selection" target="_blank">Wiki docs</a>).
-    <ul>
-      <li>Single Select, you can click on any cell to make the row active</li>
-      <li>Multiple Selections, you need to specifically click on the checkbox to make 1 or more selections</li>
-      <li>You can use "selectableOverride()" callback to override logic to display checkbox on every row (for example only show it every 2nd row)</li>
-      <li>NOTE: Any Row Selection(s) will be reset when using Pagination and changing Page (you will need to set it back manually if you want it back)</li>
-    </ul>
-  `;
-
-  angularGrid1!: AngularGridInstance;
-  angularGrid2!: AngularGridInstance;
-  columnDefinitions1!: Column[];
-  columnDefinitions2!: Column[];
-  gridOptions1!: GridOption;
-  gridOptions2!: GridOption;
-  dataset1!: any[];
-  dataset2!: any[];
-  gridObj1!: any;
-  gridObj2!: any;
-  isGrid2WithPagination = true;
-  selectedTitles!: any[];
-  selectedTitle!: any;
-  selectedGrid2IDs!: number[];
-
-  constructor(private cd: ChangeDetectorRef) { }
-
-  ngOnInit(): void {
-    this.prepareGrid();
-  }
-
-  angularGridReady1(angularGrid: AngularGridInstance) {
-    this.angularGrid1 = angularGrid;
-    this.gridObj1 = angularGrid && angularGrid.slickGrid || {};
-  }
-
-  angularGridReady2(angularGrid: AngularGridInstance) {
-    this.angularGrid2 = angularGrid;
-    this.gridObj2 = angularGrid && angularGrid.slickGrid || {};
-  }
-
-  prepareGrid() {
-    this.columnDefinitions1 = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, filterable: true },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, filterable: true },
-      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, filterable: true, sortable: true },
-      {
-        id: 'start', name: 'Start', field: 'start',
-        formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date,
-        filterable: true, sortable: true, filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'finish', name: 'Finish', field: 'finish',
-        formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date,
-        filterable: true, sortable: true, filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
-        formatter: Formatters.checkmark, type: FieldType.boolean,
-        sortable: true, filterable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
-          model: Filters.singleSelect,
-        }
-      }
-    ];
-
-    this.columnDefinitions2 = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, filterable: true },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, filterable: true },
-      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, filterable: true, sortable: true },
-      {
-        id: 'start', name: 'Start', field: 'start',
-        formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date,
-        filterable: true, sortable: true, filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'finish', name: 'Finish', field: 'finish',
-        formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date,
-        filterable: true, sortable: true, filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
-        formatter: Formatters.checkmark, type: FieldType.boolean,
-        sortable: true, filterable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
-          model: Filters.singleSelect,
-        }
-      }
-    ];
-
-    this.gridOptions1 = {
-      gridHeight: 225,
-      gridWidth: 800,
-      enableAutoResize: false,
-      enableCellNavigation: true,
-      enableRowSelection: true,
-      enableCheckboxSelector: true,
-      enableFiltering: true,
-      checkboxSelector: {
-        // optionally change the column index position of the icon (defaults to 0)
-        // columnIndexPosition: 1,
-
-        // remove the unnecessary "Select All" checkbox in header when in single selection mode
-        hideSelectAllCheckbox: true,
-
-        // 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: SlickGrid) => (dataContext.id % 2 === 1)
-      },
-      multiSelect: false,
-      rowSelectionOptions: {
-        // True (Single Selection), False (Multiple Selections)
-        selectActiveRow: true,
-      },
-      columnPicker: {
-        hideForceFitButton: true
-      },
-      gridMenu: {
-        hideForceFitButton: true
-      },
-      enablePagination: true,
-      pagination: {
-        pageSizes: [5, 10, 15, 20, 25, 50, 75, 100],
-        pageSize: 5
-      },
-      // we can use some Presets, for the example Pagination
-      presets: {
-        pagination: { pageNumber: 2, pageSize: 5 },
-      },
-    };
-
-    this.gridOptions2 = {
-      gridHeight: 255,
-      gridWidth: 800,
-      enableAutoResize: false,
-      enableCellNavigation: true,
-      enableFiltering: true,
-      checkboxSelector: {
-        // you can toggle these 2 properties to show the "select all" checkbox in different location
-        hideInFilterHeaderRow: false,
-        hideInColumnTitleRow: true
-      },
-      rowSelectionOptions: {
-        // True (Single Selection), False (Multiple Selections)
-        selectActiveRow: false
-      },
-      enableCheckboxSelector: true,
-      enableRowSelection: true,
-      enablePagination: true,
-      pagination: {
-        pageSizes: [5, 10, 15, 20, 25, 50, 75, 100],
-        pageSize: 5
-      },
-      // 1. pre-select some grid row indexes (less recommended, better use the Presets, see below)
-      // preselectedRows: [0, 2],
-
-      // 2. or use the Presets to pre-select some rows
-      presets: {
-        // you can presets row selection here as well, you can choose 1 of the following 2 ways of setting the selection
-        // by their index position in the grid (UI) or by the object IDs, the default is "dataContextIds" and if provided it will use it and disregard "gridRowIndexes"
-        // the RECOMMENDED is to use "dataContextIds" since that will always work even with Pagination, while "gridRowIndexes" is only good for 1 page
-        rowSelection: {
-          // gridRowIndexes: [2],           // the row position of what you see on the screen (UI)
-          dataContextIds: [3, 12, 13, 522]  // (recommended) select by your data object IDs
-        }
-      },
-    };
-
-    this.dataset1 = this.prepareData(495);
-    this.dataset2 = this.prepareData(525);
-  }
-
-  prepareData(count: number) {
-    // mock a dataset
-    const mockDataset = [];
-    for (let i = 0; i < count; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 10);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor((Math.random() * 29));
-      const randomPercent = Math.round(Math.random() * 100);
-
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        duration: Math.round(Math.random() * 100) + '',
-        percentComplete: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: new Date(randomYear, randomMonth, randomDay),
-        finish: new Date(randomYear, (randomMonth + 1), randomDay),
-        effortDriven: (i % 5 === 0)
-      };
-    }
-    return mockDataset;
-  }
-
-  goToGrid1FirstPage() {
-    this.angularGrid1.paginationService!.goToFirstPage();
-  }
-
-  goToGrid1LastPage() {
-    this.angularGrid1.paginationService!.goToLastPage();
-  }
-
-  goToGrid2FirstPage() {
-    this.angularGrid2.paginationService!.goToFirstPage();
-  }
-
-  goToGrid2LastPage() {
-    this.angularGrid2.paginationService!.goToLastPage();
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  grid1StateChanged(gridStateChanges: GridStateChange) {
-    console.log('Grid State changed:: ', gridStateChanges);
-    console.log('Grid State changed:: ', gridStateChanges.change);
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  grid2StateChanged(gridStateChanges: GridStateChange) {
-    console.log('Grid State changed:: ', gridStateChanges);
-    console.log('Grid State changed:: ', gridStateChanges.change);
-
-    if (gridStateChanges!.gridState!.rowSelection) {
-      this.selectedGrid2IDs = (gridStateChanges!.gridState!.rowSelection.filteredDataContextIds || []) as number[];
-      this.selectedGrid2IDs = this.selectedGrid2IDs.sort((a, b) => a - b); // sort by ID
-      this.selectedTitles = this.selectedGrid2IDs.map(dataContextId => `Task ${dataContextId}`);
-      this.cd.detectChanges();
-    }
-  }
-
-  // Toggle the Pagination of Grid2
-  // IMPORTANT, the Pagination MUST BE CREATED on initial page load before you can start toggling it
-  // Basically you cannot toggle a Pagination that doesn't exist (must created at the time as the grid)
-  togglePaginationGrid2() {
-    this.isGrid2WithPagination = !this.isGrid2WithPagination;
-    this.angularGrid2.paginationService!.togglePaginationVisibility(this.isGrid2WithPagination);
-  }
-
-  handleSelectedRowsChanged1(e: Event, args: any) {
-    if (Array.isArray(args.rows) && this.gridObj1) {
-      this.selectedTitle = args.rows.map((idx: number) => {
-        const item = this.gridObj1.getDataItem(idx);
-        return item.title || '';
-      });
-    }
-  }
-}

package/src/app/examples/grid-state.component.html

@@ -1,36 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    {{title}}
-    <span class="float-end">
-      <a style="font-size: 18px"
-         target="_blank"
-         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-state.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <button class="btn btn-outline-secondary btn-sm" data-test="reset-button" (click)="clearGridStateFromLocalStorage()">
-    <i class="fa fa-times"></i>
-    Clear Grid State from Local Storage &amp; Reset Grid
-  </button>
-
-  <button class="btn btn-outline-secondary btn-sm" (click)="switchLanguage()" data-test="language-button">
-    <i class="fa fa-language"></i>
-    Switch Language
-  </button>
-  <b>Locale:</b>
-  <span style="font-style: italic" data-test="selected-locale">
-    {{selectedLanguage + '.json'}}
-  </span>
-
-  <angular-slickgrid gridId="grid16"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [dataset]="dataset"
-                     (onAngularGridCreated)="angularGridReady($event.detail)"
-                     (onGridStateChanged)="gridStateChanged($event.detail)"
-                     (onBeforeGridDestroy)="saveCurrentGridState()">
-  </angular-slickgrid>
-</div>

package/src/app/examples/grid-state.component.ts

@@ -1,259 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { Subscription } from 'rxjs';
-import {
-  AngularGridInstance,
-  Column,
-  FieldType,
-  Filters,
-  Formatters,
-  GridOption,
-  GridState,
-  GridStateChange,
-  MultipleSelectOption,
-  unsubscribeAllObservables
-} from './../modules/angular-slickgrid';
-
-function randomBetween(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-const DEFAULT_PAGE_SIZE = 25;
-const LOCAL_STORAGE_KEY = 'gridState';
-const NB_ITEMS = 500;
-
-@Component({
-  templateUrl: './grid-state.component.html'
-})
-export class GridStateComponent implements OnInit, OnDestroy {
-  title = 'Example 16: Grid State & Presets using Local Storage';
-  subTitle = `
-    Grid State & Preset (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-State-&-Preset" target="_blank">Wiki docs</a>)
-    <br/>
-    <ul class="small">
-      <li>Uses Local Storage to persist the Grid State and uses Grid Options "presets" to put the grid back to it's previous state</li>
-      <ul>
-        <li>to demo this, simply change any columns (position reorder, visibility, size, filter, sort), then refresh your browser with (F5)</li>
-      </ul>
-      <li>Local Storage is just one option, you can use whichever is more convenient for you (Local Storage, Session Storage, DB, ...)</li>
-    </ul>
-  `;
-  private subscriptions: Subscription[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  selectedLanguage: string;
-
-  constructor(private translate: TranslateService) {
-    this.selectedLanguage = this.translate.getDefaultLang();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnDestroy() {
-    // also unsubscribe all Angular Subscriptions
-    this.subscriptions = unsubscribeAllObservables(this.subscriptions);
-  }
-
-  ngOnInit(): void {
-    const presets = JSON.parse(localStorage[LOCAL_STORAGE_KEY] || null);
-
-    // use some Grid State preset defaults if you wish or just restore from Locale Storage
-    // presets = presets || this.useDefaultPresets();
-    this.defineGrid(presets);
-
-    // always start with English for Cypress E2E tests to be consistent
-    const defaultLang = 'en';
-    this.translate.use(defaultLang);
-    this.selectedLanguage = defaultLang;
-  }
-
-  /** Clear the Grid State from Local Storage and reset the grid to it's original state */
-  clearGridStateFromLocalStorage() {
-    localStorage[LOCAL_STORAGE_KEY] = null;
-    this.angularGrid.gridService.resetGrid(this.columnDefinitions);
-    this.angularGrid.paginationService!.changeItemPerPage(DEFAULT_PAGE_SIZE);
-  }
-
-  /* Define grid Options and Columns */
-  defineGrid(gridStatePresets?: GridState) {
-    // prepare a multiple-select array to filter with
-    const multiSelectFilterArray = [];
-    for (let i = 0; i < NB_ITEMS; i++) {
-      multiSelectFilterArray.push({ value: i, label: i });
-    }
-
-    this.columnDefinitions = [
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'title',
-        nameKey: 'TITLE',
-        filterable: true,
-        sortable: true,
-        type: FieldType.string,
-        minWidth: 45, width: 100,
-        filter: {
-          model: Filters.compoundInput
-        }
-      },
-      {
-        id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80, width: 100,
-        type: FieldType.string,
-        filter: {
-          model: Filters.input
-        }
-      },
-      {
-        id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true,
-        minWidth: 55, width: 100,
-        nameKey: 'DURATION',
-        filterable: true,
-        filter: {
-          collection: multiSelectFilterArray,
-          model: Filters.multipleSelect,
-          // we could add certain option(s) to the "multiple-select" plugin
-          filterOptions: {
-            maxHeight: 250,
-            width: 175
-          } as MultipleSelectOption
-        }
-      },
-      {
-        id: 'complete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', minWidth: 70, type: FieldType.number, sortable: true, width: 100,
-        formatter: Formatters.percentCompleteBar, filterable: true, filter: { model: Filters.slider, operator: '>' }
-      },
-      {
-        id: 'start', name: 'Start', field: 'start', nameKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true, width: 100,
-        type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
-      },
-      {
-        id: 'completed', field: 'completed', nameKey: 'COMPLETED', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmark, width: 100,
-        type: FieldType.boolean,
-        sortable: true,
-        filterable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
-          model: Filters.singleSelect,
-
-          // we could add certain option(s) to the "multiple-select" plugin
-          filterOptions: { autoDropWidth: true } as MultipleSelectOption,
-        }
-      }
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableCheckboxSelector: true,
-      enableFiltering: true,
-      enableTranslate: true,
-      i18n: this.translate,
-      columnPicker: {
-        hideForceFitButton: true
-      },
-      gridMenu: {
-        hideForceFitButton: true,
-        hideClearFrozenColumnsCommand: false,
-      },
-      headerMenu: {
-        hideFreezeColumnsCommand: false,
-      },
-      enablePagination: true,
-      pagination: {
-        pageSizes: [5, 10, 15, 20, 25, 30, 40, 50, 75, 100],
-        pageSize: DEFAULT_PAGE_SIZE
-      },
-    };
-
-    // reload the Grid State with the grid options presets
-    if (gridStatePresets) {
-      this.gridOptions.presets = gridStatePresets;
-    }
-
-    this.dataset = this.getData(NB_ITEMS);
-  }
-
-  getData(count: number) {
-    // mock a dataset
-    const tmpData = [];
-    for (let i = 0; i < count; i++) {
-      const randomDuration = Math.round(Math.random() * 100);
-      const randomYear = randomBetween(2000, 2025);
-      const randomYearShort = randomBetween(10, 25);
-      const randomMonth = randomBetween(1, 12);
-      const randomMonthStr = (randomMonth < 10) ? `0${randomMonth}` : randomMonth;
-      const randomDay = randomBetween(10, 28);
-      const randomPercent = randomBetween(0, 100);
-      const randomHour = randomBetween(10, 23);
-      const randomTime = randomBetween(10, 59);
-
-      tmpData[i] = {
-        id: i,
-        title: 'Task ' + i,
-        etc: 'Something hidden ' + i,
-        description: (i % 5) ? 'desc ' + i : null, // also add some random to test NULL field
-        duration: randomDuration,
-        percentComplete: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: new Date(randomYear, randomMonth, randomDay),          // provide a Date format
-        usDateShort: `${randomMonth}/${randomDay}/${randomYearShort}`, // provide a date US Short in the dataset
-        utcDate: `${randomYear}-${randomMonthStr}-${randomDay}T${randomHour}:${randomTime}:${randomTime}Z`,
-        completed: (i % 3 === 0)
-      };
-    }
-    return tmpData;
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  gridStateChanged(gridStateChanges: GridStateChange) {
-    console.log('Client sample, Grid State changed:: ', gridStateChanges);
-    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridStateChanges.gridState);
-  }
-
-  /** Save current Filters, Sorters in LocaleStorage or DB */
-  saveCurrentGridState() {
-    const gridState: GridState = this.angularGrid.gridStateService.getCurrentGridState();
-    console.log('Client sample, last Grid State:: ', gridState);
-    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridState);
-  }
-
-  switchLanguage() {
-    const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-
-  useDefaultPresets() {
-    // use columnDef searchTerms OR use presets as shown below
-    return {
-      columns: [
-        { columnId: 'description', width: 170 }, // flip column position of Title/Description to Description/Title
-        { columnId: 'title', width: 55 },
-        { columnId: 'duration' },
-        { columnId: 'complete' },
-        { columnId: 'start' },
-        { columnId: 'usDateShort' },
-        { columnId: 'utcDate' },
-        // { columnId: 'completed' }, // to HIDE a column, simply ommit it from the preset array
-      ],
-      filters: [
-        { columnId: 'duration', searchTerms: [2, 22, 44] },
-        // { columnId: 'complete', searchTerms: ['5'], operator: '>' },
-        { columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
-        // { columnId: 'completed', searchTerms: [true] }
-      ],
-      sorters: [
-        { columnId: 'duration', direction: 'DESC' },
-        { columnId: 'complete', direction: 'ASC' }
-      ],
-    } as GridState;
-  }
-}

package/src/app/examples/grid-tabs.component.html

@@ -1,35 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    {{title}}
-    <span class="float-end">
-      <a style="font-size: 18px"
-         target="_blank"
-         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-tabs.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div>
-    <tabset>
-      <tab heading="Javascript" id="javascript" data-test="javascript-tab">
-        <h4>Grid 1 - Load Local Data</h4>
-        <angular-slickgrid gridId="grid1"
-                           [columnDefinitions]="columnDefinitions1"
-                           [gridOptions]="gridOptions1"
-                           [dataset]="dataset1">
-        </angular-slickgrid>
-      </tab>
-      <tab heading="Http-Client" data-test="http-tab" (selectTab)="resizeGrid2()">
-        <h4>Grid 2 - Load a JSON dataset through Http-Client</h4>
-        <angular-slickgrid gridId="grid2"
-                           [columnDefinitions]="columnDefinitions2"
-                           [gridOptions]="gridOptions2"
-                           [dataset]="dataset2"
-                           (onAngularGridCreated)="angularGrid2Ready($event.detail)">
-        </angular-slickgrid>
-      </tab>
-    </tabset>
-  </div>
-</div>