angular-slickgrid 4.1.2 → 4.2.0

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

@@ -0,0 +1,267 @@
+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

@@ -0,0 +1,36 @@
+<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

@@ -0,0 +1,259 @@
+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

@@ -0,0 +1,35 @@
+<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>