angular-slickgrid 4.2.0 → 4.2.3

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

@@ -1,48 +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-additem.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle"
-       [innerHTML]="subTitle"></div>
-
-  <div class="col-sm-12">
-    <span>
-      <label>Scroll: </label>
-      <div class="btn-group" role="group">
-        <button class="btn btn-sm btn-outline-secondary" data-test="scroll-top-btn" (click)="scrollGridTop()">
-          <i class="fa fa-arrow-up"></i>
-        </button>
-        <button class="btn btn-sm btn-outline-secondary" data-test="scroll-bottom-btn" (click)="scrollGridBottom()">
-          <i class="fa fa-arrow-down"></i>
-        </button>
-      </div>
-      <button class="btn btn-sm btn-outline-secondary" data-test="add-new-item-top-btn"
-              (click)="addNewItem()">Add New Mocked Item</button>
-      <button class="btn btn-sm btn-outline-secondary" data-test="add-new-item-bottom-btn"
-              (click)="addNewItem('bottom')">Add New Mocked Item (bottom)</button>
-      <button class="btn btn-sm btn-outline-secondary" data-test="update-second-item-btn"
-              (click)="updateSecondItem()">Update 2nd Row Item with Random Duration</button>
-      <button class="btn btn-sm btn-outline-secondary" data-test="highlight-row5-btn"
-              (click)="highlighFifthRow()">Highlight 5th Row</button>
-      <button class="btn btn-sm btn-outline-secondary" 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"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset"
-                       (onAngularGridCreated)="angularGridReady($event.detail)">
-    </angular-slickgrid>
-  </div>
-</div>

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

@@ -1,272 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, Editors, FieldType, Formatters, GridOption, GridService, OnEventArgs, SlickDataView, SlickGrid } from './../modules/angular-slickgrid';
-
-@Component({
-  styles: ['.duration-bg { background-color: #e9d4f1 !important }'],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './grid-additem.component.html'
-})
-export class GridAddItemComponent implements OnInit {
-  title = 'Example 11: Add / Update / Highlight a Datagrid Item';
-  subTitle = `
-  Add / Update / Hightlight an Item from the Datagrid (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Add,-Update-or-Highlight-a-Datagrid-Item" 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/Angular-Slickgrid/blob/master/src/app/modules/angular-slickgrid/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)
-    <ul>
-      <li>Example, click on button "Highlight Rows with Duration over 50" to see row styling changing. <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Dynamically-Add-CSS-Classes-to-Item-Rows" target="_blank">Wiki doc</a></li>
-    </ul>
-  </ul>
-  `;
-
-  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.deleteIcon,
-        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,
-        type: FieldType.string,
-        editor: {
-          model: Editors.longText
-        }
-      },
-      {
-        id: 'duration', name: 'Duration (days)', field: 'duration',
-        sortable: true,
-        type: FieldType.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: FieldType.number,
-        editor: {
-          model: Editors.integer
-        }
-      },
-      {
-        id: 'start', name: 'Start', field: 'start',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        type: FieldType.date,
-        /*
-        editor: {
-          model: Editors.date
-        }
-        */
-      },
-      {
-        id: 'finish', name: 'Finish', field: 'finish',
-        formatter: Formatters.dateIso, sortable: true,
-        type: FieldType.date
-      },
-      {
-        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
-        formatter: Formatters.checkmark,
-        type: FieldType.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);
-    const newItem2 = this.createNewItem(2);
-
-    // single insert
-    this.angularGrid.gridService.addItem(newItem1, { position: insertPosition });
-
-    // OR multiple inserts
-    // 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();
-  }
-}

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

@@ -1,79 +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-angular.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle"
-       [innerHTML]="subTitle"></div>
-
-  <div class="col-sm-6">
-    <label>autoEdit setting: </label>
-    <span id="radioAutoEdit">
-      <label class="radio-inline control-label"
-             for="radioTrue">
-        <input type="radio"
-               name="inlineRadioOptions"
-               id="radioTrue"
-               checked
-               [value]="isAutoEdit"
-               (change)="setAutoEdit(true)"> ON (single-click)
-      </label>
-      <label class="radio-inline control-label"
-             for="radioFalse">
-        <input type="radio"
-               name="inlineRadioOptions"
-               id="radioFalse"
-               [value]="isAutoEdit"
-               (change)="setAutoEdit(false)"> OFF (double-click)
-      </label>
-    </span>
-    <div class="row col-sm-12">
-      <span>
-        <button class="btn btn-outline-secondary btn-sm" (click)="undo()">
-          <i class="fa fa-undo"></i>
-          Undo last edit(s)
-        </button>
-        <button class="btn btn-outline-secondary btn-sm" (click)="angularGrid.filterService.clearFilters()">
-          Clear Filters
-        </button>
-        <button class="btn btn-outline-secondary btn-sm" (click)="angularGrid.sortService.clearSorting()">
-          Clear Sorting
-        </button>
-        <label class="checkbox-inline control-label" for="autoCommitEdit">
-          <input type="checkbox" id="autoCommitEdit" data-test="auto-commit"
-                 [checked]="gridOptions.autoCommitEdit"
-                 (click)="changeAutoCommit()">
-          Auto Commit Edit
-        </label>
-      </span>
-    </div>
-  </div>
-
-
-  <div class="col-sm-6">
-    <div class="alert alert-info" *ngIf="updatedObject">
-      <strong>Updated Item:</strong> {{updatedObject | json}}
-    </div>
-    <div class="alert alert-warning" *ngIf="alertWarning">
-      <strong>Updated Item:</strong> {{alertWarning}}
-    </div>
-  </div>
-
-  <div class="col-sm-12">
-    <angular-slickgrid gridId="grid22"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset"
-                       (onAngularGridCreated)="angularGridReady($event.detail)"
-                       (onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
-                       (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
-                       (onValidationError)="onCellValidationError($event.detail.eventData, $event.detail.args)">
-    </angular-slickgrid>
-  </div>
-</div>

package/src/app/examples/grid-angular.component.scss

@@ -1,28 +0,0 @@
-h3 {
-  font-style: normal;
-  color: #3d3d3d;
-}
-.fake-hyperlink {
-  color: #0d6efd;
-  text-decoration: underline;
-  text-decoration-color: #0d6efd;
-}
-
-#slickGridContainer-grid22 {
-  .slickgrid-container {
-    .slick-headerrow-column {
-      .ng-input {
-        padding-top: -4px !important;
-        padding-left: 4px !important;
-      }
-    }
-    .slick-cell {
-      line-height: 30px !important;
-    }
-  }
-
-  input.slider-filter-input[type=range],
-  .form-control {
-    height: 34px !important;
-  }
-}