angular-slickgrid 9.0.0 → 9.0.2

package/src/demos/examples/example10.component.ts

@@ -1,309 +0,0 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-
-import { AngularGridInstance, Column, Filters, Formatters, GridOption, GridStateChange } from '../../library';
-
-@Component({
-  templateUrl: './example10.component.html',
-  styles: ['.alert { padding: 8px; margin-bottom: 10px }', '.col-sm-1{ max-width: 70px }'],
-  standalone: false,
-})
-export class Example10Component implements OnInit {
-  angularGrid1!: AngularGridInstance;
-  angularGrid2!: AngularGridInstance;
-  columnDefinitions1!: Column[];
-  columnDefinitions2!: Column[];
-  gridOptions1!: GridOption;
-  gridOptions2!: GridOption;
-  dataset1!: any[];
-  dataset2!: any[];
-  gridObj1!: any;
-  gridObj2!: any;
-  isGrid2WithPagination = true;
-  selectedTitles = '';
-  selectedTitle = '';
-  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, filterable: true },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: 'number', filterable: true },
-      {
-        id: 'complete',
-        name: '% Complete',
-        field: 'percentComplete',
-        formatter: Formatters.percentCompleteBar,
-        type: 'number',
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        formatter: Formatters.dateIso,
-        exportWithFormatter: true,
-        type: 'date',
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        formatter: Formatters.dateIso,
-        exportWithFormatter: true,
-        type: 'date',
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'effort-driven',
-        name: 'Effort Driven',
-        field: 'effortDriven',
-        formatter: Formatters.checkmarkMaterial,
-        type: '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, filterable: true },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: 'number', filterable: true },
-      {
-        id: 'complete',
-        name: '% Complete',
-        field: 'percentComplete',
-        formatter: Formatters.percentCompleteBar,
-        type: 'number',
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        formatter: Formatters.dateIso,
-        exportWithFormatter: true,
-        type: 'date',
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        formatter: Formatters.dateIso,
-        exportWithFormatter: true,
-        type: 'date',
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'effort-driven',
-        name: 'Effort Driven',
-        field: 'effortDriven',
-        formatter: Formatters.checkmarkMaterial,
-        type: '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,
-        applySelectOnAllPages: true, // when clicking "Select All", should we apply it to all pages (defaults to 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}`).join(',');
-      if (this.selectedTitles.length > 293) {
-        this.selectedTitles = this.selectedTitles.substring(0, 293) + '...';
-      }
-      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/demos/examples/example11.component.html

@@ -1,91 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 11: Add / Update / Highlight a Datagrid Item
-    <span class="float-end">
-      <a
-        style="font-size: 18px"
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-additem.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    Add / Update / Hightlight an Item from the Datagrid (<a
-      href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/add-update-highlight"
-      target="_blank"
-      >Wiki docs</a
-    >).
-    <ul>
-      <li><b>Note:</b> this demo is <b>only</b> on the datagrid (client) side, you still need to deal with the backend yourself</li>
-      <li>Adding an item, will always be showing as the 1st item in the grid because that is the best visual place to add it</li>
-      <li>Add/Update an item requires a valid Slickgrid Selection Model, you have 2 choices to deal with this:</li>
-      <ul>
-        <li>You can enable "enableCheckboxSelector" or "enableRowSelection" to True</li>
-      </ul>
-      <li>Click on any of the buttons below to test this out</li>
-      <li>
-        You can change the highlighted color &amp; animation by changing the
-        <a href="https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss" target="_blank"
-          >SASS Variables</a
-        >:
-      </li>
-      <ul>
-        <li>"$row-highlight-background-color" or "$row-highlight-fade-animation"</li>
-      </ul>
-      <li>You can also add CSS class(es) on the fly (or on page load) on rows with certain criteria, (e.g. click on last button)</li>
-      <ul>
-        <li>
-          Example, click on button "Highlight Rows with Duration over 50" to see row styling changing.
-          <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/dynamic-item-metadata" target="_blank">Wiki doc</a>
-        </li>
-      </ul>
-    </ul>
-  </div>
-
-  <div class="col-sm-12">
-    <span>
-      <label>Scroll: </label>
-      <div class="btn-group" role="group">
-        <button class="btn btn-sm btn-outline-secondary btn-icon" data-test="scroll-top-btn" (click)="scrollGridTop()">
-          <i class="mdi mdi-arrow-down mdi-rotate-180"></i>
-        </button>
-        <button class="btn btn-sm btn-outline-secondary btn-icon" data-test="scroll-bottom-btn" (click)="scrollGridBottom()">
-          <i class="mdi mdi-arrow-down"></i>
-        </button>
-      </div>
-      <button class="btn btn-sm btn-outline-secondary btn-icon" data-test="add-new-item-top-btn" (click)="addNewItem()">
-        Add New Mocked Item
-      </button>
-      <button class="btn btn-sm btn-outline-secondary btn-icon" data-test="add-new-item-bottom-btn" (click)="addNewItem('bottom')">
-        Add New Mocked Item (bottom)
-      </button>
-      <button class="btn btn-sm btn-outline-secondary btn-icon" data-test="update-second-item-btn" (click)="updateSecondItem()">
-        Update 2nd Row Item with Random Duration
-      </button>
-      <button class="btn btn-sm btn-outline-secondary btn-icon" data-test="highlight-row5-btn" (click)="highlighFifthRow()">
-        Highlight 5th Row
-      </button>
-      <button
-        class="btn btn-sm btn-outline-secondary btn-icon"
-        data-test="highlight-duration40-btn"
-        (click)="changeDurationBackgroundColor()"
-      >
-        Highlight Rows with Duration over 40
-      </button>
-    </span>
-    <hr />
-  </div>
-
-  <div class="col-sm-12">
-    <angular-slickgrid
-      gridId="grid11"
-      [columns]="columnDefinitions"
-      [options]="gridOptions"
-      [dataset]="dataset"
-      (onAngularGridCreated)="angularGridReady($event.detail)"
-    >
-    </angular-slickgrid>
-  </div>
-</div>

package/src/demos/examples/example11.component.ts

@@ -1,276 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import {
-  AngularGridInstance,
-  Column,
-  Editors,
-  Formatters,
-  GridOption,
-  GridService,
-  OnEventArgs,
-  SlickDataView,
-  SlickGrid,
-} from '../../library';
-
-@Component({
-  styles: ['.duration-bg { background-color: #e9d4f1 !important }'],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './example11.component.html',
-  standalone: false,
-})
-export class Example11Component implements OnInit {
-  angularGrid!: AngularGridInstance;
-  grid!: SlickGrid;
-  gridService!: GridService;
-  dataView!: SlickDataView;
-  columnDefinitions: Column[] = [];
-  gridOptions!: GridOption;
-  dataset: any[];
-  updatedObject: any;
-
-  constructor() {
-    // mock a dataset
-    this.dataset = this.mockDataset(1000);
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.dataView = angularGrid.dataView;
-    this.grid = angularGrid.slickGrid as SlickGrid;
-    this.gridService = angularGrid.gridService;
-
-    // if you want to change background color of Duration over 50 right after page load,
-    // you would put the code here, also make sure to re-render the grid for the styling to be applied right away
-    /*
-    this.dataView.getItemMetadata = this.updateItemMetadataForDurationOver50(this.dataView.getItemMetadata);
-    this.grid.invalidate();
-    this.grid.render();
-    */
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      {
-        id: 'delete',
-        field: 'id',
-        excludeFromHeaderMenu: true,
-        formatter: Formatters.icon,
-        params: { iconCssClass: 'mdi mdi-trash-can pointer' },
-        minWidth: 30,
-        maxWidth: 30,
-        // use onCellClick OR grid.onClick.subscribe which you can see down below
-        onCellClick: (e: Event, args: OnEventArgs) => {
-          console.log(args);
-          if (confirm('Are you sure?')) {
-            this.angularGrid.gridService.deleteItemById(args.dataContext.id);
-          }
-        },
-      },
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'title',
-        sortable: true,
-        editor: {
-          model: Editors.longText,
-        },
-      },
-      {
-        id: 'duration',
-        name: 'Duration (days)',
-        field: 'duration',
-        sortable: true,
-        type: 'number',
-        editor: {
-          model: Editors.text,
-        },
-        onCellChange: (e: Event, args: OnEventArgs) => {
-          alert('onCellChange directly attached to the column definition');
-          console.log(args);
-        },
-      },
-      {
-        id: 'complete',
-        name: '% Complete',
-        field: 'percentComplete',
-        formatter: Formatters.percentCompleteBar,
-        type: 'number',
-        editor: {
-          model: Editors.integer,
-        },
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        type: 'date',
-        /*
-        editor: {
-          model: Editors.date
-        }
-        */
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        type: 'date',
-      },
-      {
-        id: 'effort-driven',
-        name: 'Effort Driven',
-        field: 'effortDriven',
-        formatter: Formatters.checkmarkMaterial,
-        type: 'number',
-        editor: {
-          model: Editors.checkbox,
-        },
-      },
-    ];
-
-    this.gridOptions = {
-      asyncEditorLoading: false,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      editable: true,
-      enableColumnPicker: true,
-      enableCellNavigation: true,
-      enableRowSelection: true,
-    };
-  }
-
-  mockDataset(itemCount: number) {
-    // mock a dataset
-    const mockedDataset = [];
-    for (let i = 0; i < itemCount; 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);
-      mockedDataset[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 mockedDataset;
-  }
-
-  addNewItem(insertPosition?: 'top' | 'bottom') {
-    const newItem1 = this.createNewItem(1);
-
-    // single insert
-    this.angularGrid.gridService.addItem(newItem1, { position: insertPosition });
-
-    // OR multiple inserts
-    // const newItem2 = this.createNewItem(2);
-    // this.angularGrid.gridService.addItems([newItem1, newItem2], { position: insertPosition });
-  }
-
-  createNewItem(incrementIdByHowMany = 1) {
-    const dataset = this.angularGrid.dataView.getItems();
-    let highestId = 0;
-    dataset.forEach((item: any) => {
-      if (item.id > highestId) {
-        highestId = item.id;
-      }
-    });
-    const newId = highestId + incrementIdByHowMany;
-    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);
-
-    return {
-      id: newId,
-      title: 'Task ' + newId,
-      duration: Math.round(Math.random() * 100) + '',
-      percentComplete: randomPercent,
-      percentCompleteNumber: randomPercent,
-      start: new Date(randomYear, randomMonth, randomDay),
-      finish: new Date(randomYear, randomMonth + 2, randomDay),
-      effortDriven: true,
-    };
-  }
-
-  highlighFifthRow() {
-    this.scrollGridTop();
-    this.angularGrid.gridService.highlightRow(4, 1500);
-  }
-
-  /** Change the Duration Rows Background Color */
-  changeDurationBackgroundColor() {
-    this.dataView.getItemMetadata = this.updateItemMetadataForDurationOver40(this.dataView.getItemMetadata);
-
-    // also re-render the grid for the styling to be applied right away
-    this.grid.invalidate();
-    this.grid.render();
-
-    // or use the Angular-SlickGrid GridService
-    // this.gridService.renderGrid();
-  }
-
-  /**
-   * Change the SlickGrid Item Metadata, we will add a CSS class on all rows with a Duration over 50
-   * For more info, you can see this SO https://stackoverflow.com/a/19985148/1212166
-   */
-  updateItemMetadataForDurationOver40(previousItemMetadata: any) {
-    const newCssClass = 'duration-bg';
-
-    return (rowNumber: number) => {
-      const item = this.dataView.getItem(rowNumber);
-      let meta = {
-        cssClasses: '',
-      };
-      if (typeof previousItemMetadata === 'object') {
-        meta = previousItemMetadata(rowNumber);
-      }
-
-      if (meta && item && item.duration) {
-        const duration = +item.duration; // convert to number
-        if (duration > 40) {
-          meta.cssClasses = (meta.cssClasses || '') + ' ' + newCssClass;
-        }
-      }
-
-      return meta;
-    };
-  }
-
-  updateSecondItem() {
-    this.scrollGridTop();
-    const updatedItem = this.angularGrid.gridService.getDataItemByRowNumber(1);
-    updatedItem.duration = Math.round(Math.random() * 100);
-    this.angularGrid.gridService.updateItem(updatedItem);
-
-    // OR by id
-    // this.angularGrid.gridService.updateItemById(updatedItem.id, updatedItem);
-
-    // OR multiple changes
-    /*
-    const updatedItem1 = this.angularGrid.gridService.getDataItemByRowNumber(1);
-    const updatedItem2 = this.angularGrid.gridService.getDataItemByRowNumber(2);
-    updatedItem1.duration = Math.round(Math.random() * 100);
-    updatedItem2.duration = Math.round(Math.random() * 100);
-    this.angularGrid.gridService.updateItems([updatedItem1, updatedItem2], { highlightRow: true });
-    */
-  }
-
-  scrollGridBottom() {
-    this.angularGrid.slickGrid.navigateBottom();
-  }
-
-  scrollGridTop() {
-    this.angularGrid.slickGrid.navigateTop();
-  }
-}