angular-slickgrid 4.1.2 → 4.2.0

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

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

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

@@ -0,0 +1,28 @@
+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;
+  }
+}