feat(examples): add more Tree View with checkbox selector code

packages/common/src/interfaces/checkboxSelector.interface.ts

@@ -2,6 +2,9 @@ export interface CheckboxSelector {
   /** Defaults to "_checkbox_selector", you can provide a different column id used as the column header id */
   columnId?: string;
 
+  /** Defaults to 0, the column index position in the grid by default it will show as the first column (index 0) */
+  columnIndexPosition?: number;
+
   /** Provide a CSS class used by each row selection check boxes */
   cssClass?: string;
 

packages/vanilla-bundle-examples/src/app.html

@@ -35,9 +35,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
         <div class="navbar-dropdown">
           <a class="navbar-item" onclick.delegate="loadRoute('example01')">Example01 - Editors</a>
           <a class="navbar-item" onclick.delegate="loadRoute('example02')">Example02 - Draggable Grouping</a>
-          <a class="navbar-item" onclick.delegate="loadRoute('example03')">Example03 - Grouping &amp; Aggregators</a>
-          <a class="navbar-item" onclick.delegate="loadRoute('example04')">Example04 - Tree View</a>
-          <a class="navbar-item" onclick.delegate="loadRoute('example05')">Example05 - SF Tree View</a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example03')">Example03 - Tree View</a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example50')">Example50 - SE Grouping &amp; Aggregators</a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example51')">Example51 - SE Tree View</a>
         </div>
       </div>
     </div>

packages/vanilla-bundle-examples/src/app.ts

@@ -10,8 +10,8 @@ export class App {
     { route: 'example01', name: 'example01', title: 'Example01', moduleId: './examples/example01' },
     { route: 'example02', name: 'example02', title: 'Example02', moduleId: './examples/example02' },
     { route: 'example03', name: 'example03', title: 'Example03', moduleId: './examples/example03' },
-    { route: 'example04', name: 'example04', title: 'Example04', moduleId: './examples/example04' },
-    { route: 'example05', name: 'example05', title: 'Example05', moduleId: './examples/example05' },
+    { route: 'example50', name: 'example50', title: 'Example50', moduleId: './examples/example50' },
+    { route: 'example51', name: 'example51', title: 'Example51', moduleId: './examples/example51' },
   ]
 
   attached() {

packages/vanilla-bundle-examples/src/examples/example02.ts

@@ -19,8 +19,6 @@ const myCustomTitleValidator = (value, args) => {
 };
 
 export class Example2 {
-  gridClass;
-  gridClassName;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset;
@@ -38,7 +36,7 @@ export class Example2 {
     const gridContainerElm = document.querySelector(`.grid2`);
     const gridElm = document.querySelector(`.slickgrid-container`);
 
-    // gridContainerElm.addEventListener('onclick', handleOnClick);
+    gridContainerElm.addEventListener('onclick', this.handleOnClick.bind(this));
     gridContainerElm.addEventListener('onvalidationerror', this.handleValidationError.bind(this));
     gridContainerElm.addEventListener('onitemdeleted', this.handleItemDeleted.bind(this));
     gridContainerElm.addEventListener('onslickergridcreated', this.handleOnSlickerGridCreated.bind(this));
@@ -60,7 +58,7 @@ export class Example2 {
       {
         id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true,
         editor: {
-          model: Slicker.Editors.text,
+          model: Slicker.Editors.integer,
           required: true,
           alwaysSaveOnEnterKey: true,
         },

packages/vanilla-bundle-examples/src/examples/example04.html → packages/vanilla-bundle-examples/src/examples/example03.html

@@ -1,4 +1,4 @@
-<h3 class="title is-4">Example 04 - Tree View</h3>
+<h3 class="title is-4">Example 03 - Tree View</h3>
 <div class="columns">
   <div class="column is-narrow">
     <button onclick.delegate="addNewRow()" class="button is-small is-info">
@@ -31,6 +31,6 @@ <h3 class="title is-4">Example 04 - Tree View</h3>
 </div>
 
 <div class="demo-container">
-  <div class="grid3">
+  <div class="grid4">
   </div>
 </div>

packages/vanilla-bundle-examples/src/examples/example04.ts → packages/vanilla-bundle-examples/src/examples/example03.ts

@@ -1,10 +1,8 @@
 import { Column, GridOption } from '@slickgrid-universal/common';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
-import './example04.scss';
+import './example03.scss';
 
 export class Example4 {
-  gridClass;
-  gridClassName;
   _commandQueue = [];
   columnDefinitions: Column[];
   gridOptions: GridOption;
@@ -22,7 +20,7 @@ export class Example4 {
   attached() {
     this.initializeGrid();
     this.dataset = [];
-    const gridContainerElm = document.querySelector('.grid3');
+    const gridContainerElm = document.querySelector('.grid4');
     const gridElm = document.querySelector('.slickgrid-container');
 
     gridContainerElm.addEventListener('onclick', this.handleOnClick.bind(this));
@@ -36,7 +34,6 @@ export class Example4 {
     this.dataViewObj.setFilter(this.myFilter.bind(this));
     this.dataset = this.mockDataset();
     this.slickgridLwc.dataset = this.dataset;
-
   }
 
   initializeGrid() {
@@ -58,20 +55,6 @@ export class Example4 {
       },
       enableAutoSizeColumns: true,
       enableAutoResize: true,
-      // enableCellNavigation: true,
-      enableGrouping: true,
-      enableRowSelection: true,
-      // enableCheckboxSelector: true,
-      formatterOptions: {
-        minDecimal: 0,
-        maxDecimal: 2,
-        thousandSeparator: ','
-      },
-      rowSelectionOptions: {
-        selectActiveRow: false // False for Multiple Selections
-      },
-      sanitizer: (dirtyHtml) => (dirtyHtml.replace(/(\b)(on\S+)(\s*)=|javascript|(<\s*)(\/*)script/gi, '')),
-      enableSorting: true,
       headerRowHeight: 45,
       rowHeight: 45,
       editCommandHandler: (item, column, editCommand) => {
@@ -131,60 +114,6 @@ export class Example4 {
     return true;
   }
 
-  customBlankFormatter() {
-    return '';
-  }
-
-  customAceGroupingFormatter(totals, columnDef) {
-    const hasAce = totals.clone && totals.clone[columnDef.field];
-    return !hasAce ? '' : '<i class="mdi mdi-check checkmark-icon green" style="color: #4DCAA9; font-size: 20px" aria-hidden="true"></i>';
-  }
-
-  customCheckmarGroupingFormatter(totals, columnDef) {
-    const hasCheckmark = totals.clone && totals.clone[columnDef.field];
-    return !hasCheckmark ? '' : '<i class="mdi mdi-check checkmark-icon" style="font-size: 20px" aria-hidden="true"></i>';
-  }
-
-  customQuantityGroupingFormatter(totals, columnDef) {
-    return totals.min && totals.min[columnDef.field] || '';
-  }
-
-  customLineTypeGroupingFormatter(totals, columnDef) {
-    const val = totals.clone && totals.clone[columnDef.field];
-    let output = '';
-    switch (val) {
-      case 'Profiled':
-        output = `<i class="mdi mdi-pencil" style="cursor: pointer; font-size: 20px" aria-hidden="true" onclick="alert('call update line modal window')"></i>`;
-        break;
-      case 'Selector':
-        output = `<i class="mdi mdi-cogs" style="cursor: pointer; font-size: 20px" aria-hidden="true" onclick="alert('validate selector')"></i>`;
-        break;
-      default:
-        output = '';
-        break;
-    }
-    return output;
-  }
-
-  customTranslationTypeGroupingFormatter(totals, columnDef) {
-    const val = totals.clone && totals.clone[columnDef.field];
-    let output = '';
-    switch (val) {
-      case 'Drawing':
-        output = `<i class="mdi mdi-file-send-outline" style="font-size: 20px" aria-hidden="true"></i>`;
-        break;
-      default:
-        output = '';
-        break;
-    }
-    return output;
-  }
-
-  customProductGroupingFormatter(totals, columnDef) {
-    const val = totals.clone && totals.clone['productGroup'];
-    return val ? `<b>${val}</b>` : '';
-  }
-
   addNewRow() {
     const id = this.dataset.length;
     const newIndent = 1;

packages/vanilla-bundle/src/vanilla-grid-bundle.ts

@@ -122,9 +122,9 @@ export class VanillaGridBundle {
     this.refreshGridData(dataset);
   }
 
-  constructor(gridContainerElm: Element, columnDefs: Column[], options: GridOption, dataset?: any[]) {
-    this._columnDefinitions = columnDefs;
-    this._gridOptions = options;
+  constructor(gridContainerElm: Element, columnDefs?: Column[], options?: GridOption, dataset?: any[]) {
+    this._columnDefinitions = columnDefs || [];
+    this._gridOptions = options || {};
     this.dataset = dataset || [];
     this._eventPubSubService = new EventPubSubService(gridContainerElm);
 
@@ -174,7 +174,7 @@ export class VanillaGridBundle {
 
   dispose() {
     this.dataView = undefined;
-    this.gridOptions = {};
+    this._gridOptions = {};
     this.extensionService.dispose();
     this.filterService.dispose();
     // this.gridEventService.dispose();
@@ -200,7 +200,7 @@ export class VanillaGridBundle {
     gridContainerElm.appendChild(this._gridElm);
 
     this._gridOptions = this.mergeGridOptions(this._gridOptions);
-    this.backendServiceApi = this.gridOptions && this.gridOptions.backendServiceApi;
+    this.backendServiceApi = this._gridOptions && this._gridOptions.backendServiceApi;
     this._isLocalGrid = !this.backendServiceApi; // considered a local grid if it doesn't have a backend service set
     this._eventPubSubService.eventNamingStyle = this._gridOptions && this._gridOptions.eventNamingStyle || EventNamingStyle.camelCase;
     this._eventHandler = new Slick.EventHandler();
@@ -244,7 +244,7 @@ export class VanillaGridBundle {
     this.gridService.init(this.grid, this.dataView);
 
     if (this._dataset.length > 0) {
-      // if (!this._isDatasetInitialized && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection)) {
+      // if (!this._isDatasetInitialized && (this._gridOptions.enableCheckboxSelector || this._gridOptions.enableRowSelection)) {
       //   this.loadRowSelectionPresetWhenExists();
       // }
       this._isDatasetInitialized = true;
@@ -269,7 +269,7 @@ export class VanillaGridBundle {
       slickGrid: this.grid,
 
       // return all available Services (non-singleton)
-      backendService: this.gridOptions && this.gridOptions.backendServiceApi && this.gridOptions.backendServiceApi.service,
+      backendService: this._gridOptions && this._gridOptions.backendServiceApi && this._gridOptions.backendServiceApi.service,
       // excelExportService: this.excelExportService,
       // exportService: this.exportService,
       filterService: this.filterService,
@@ -280,7 +280,7 @@ export class VanillaGridBundle {
       extensionService: this.extensionService,
       // paginationService: this.paginationService,
       sortService: this.sortService,
-    }
+    };
 
     this._eventPubSubService.publish('onSlickerGridCreated', slickerElementInstance);
   }
@@ -406,7 +406,7 @@ export class VanillaGridBundle {
     // local grid, check if we need to show the Pagination
     // if so then also check if there's any presets and finally initialize the PaginationService
     // a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total
-    // if (this.gridOptions && this.gridOptions.enablePagination && this._isLocalGrid) {
+    // if (this._gridOptions && this._gridOptions.enablePagination && this._isLocalGrid) {
     //   this.showPagination = true;
     //   this.loadLocalGridPagination(dataset);
     // }
@@ -418,7 +418,7 @@ export class VanillaGridBundle {
       }
 
       if (dataset.length > 0) {
-        // if (!this._isDatasetInitialized && this.gridOptions.enableCheckboxSelector) {
+        // if (!this._isDatasetInitialized && this._gridOptions.enableCheckboxSelector) {
         //   this.loadRowSelectionPresetWhenExists();
         // }
         this._isDatasetInitialized = true;
@@ -430,14 +430,14 @@ export class VanillaGridBundle {
       }
 
       // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly
-      // this.showPagination = (this.gridOptions && (this.gridOptions.enablePagination || (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined))) ? true : false;
+      // this.showPagination = (this._gridOptions && (this._gridOptions.enablePagination || (this._gridOptions.backendServiceApi && this._gridOptions.enablePagination === undefined))) ? true : false;
 
-      // if (this.gridOptions && this.gridOptions.backendServiceApi && this.gridOptions.pagination && this.paginationOptions) {
-      //   const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this.gridOptions, this.paginationOptions);
+      // if (this._gridOptions && this._gridOptions.backendServiceApi && this._gridOptions.pagination && this.paginationOptions) {
+      //   const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this._gridOptions, this.paginationOptions);
 
       //   // when we have a totalCount use it, else we'll take it from the pagination object
       //   // only update the total items if it's different to avoid refreshing the UI
-      //   const totalRecords = (totalCount !== undefined) ? totalCount : (this.gridOptions && this.gridOptions.pagination && this.gridOptions.pagination.totalItems);
+      //   const totalRecords = (totalCount !== undefined) ? totalCount : (this._gridOptions && this._gridOptions.pagination && this._gridOptions.pagination.totalItems);
       //   if (totalRecords !== undefined && totalRecords !== this.totalItems) {
       //     this.totalItems = +totalRecords;
       //   }
@@ -465,7 +465,6 @@ export class VanillaGridBundle {
    */
   updateColumnDefinitionsList(newColumnDefinitions: Column[]) {
     // map/swap the internal library Editor to the SlickGrid Editor factory
-    // console.log('newColumnDefinitions', newColumnDefinitions)
     newColumnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(newColumnDefinitions);
     if (this._gridOptions.enableTranslate) {
       this.extensionService.translateColumnHeaders(false, newColumnDefinitions);