Merge pull request #212 from ghiscoding/bugfix/dynamic-editor-column

fix(editor): dynamically adding editor column throws error, fixes #195

Author: ghiscoding

src/app/examples/grid-editor.component.html

@@ -29,6 +29,10 @@ <h2>{{title}}</h2>
             <button class="btn btn-default btn-sm" (click)="angularGrid.sortService.clearSorting()">Clear Sorting</button>
             <button class="btn btn-default btn-sm btn-info" (click)="addItem()" title="Clear Filters &amp; Sorting to see it better">Add item</button>
             <button class="btn btn-default btn-sm btn-danger" (click)="deleteItem()">Delete item</button>
+            <button class="btn btn-default btn-sm" (click)="dynamicallyAddTitleHeader()">
+              <i class="fa fa-plus"></i>
+              Dynamically Duplicate Title Column
+            </button>
         </div>
     </div>
 

src/app/examples/grid-editor.component.ts

@@ -94,6 +94,7 @@ export class GridEditorComponent implements OnInit {
   alertWarning: any;
   updatedObject: any;
   selectedLanguage = 'en';
+  duplicateTitleHeaderCount = 1;
 
   constructor(private http: HttpClient, private translate: TranslateService) { }
 
@@ -575,6 +576,22 @@ export class GridEditorComponent implements OnInit {
     return true;
   }
 
+  dynamicallyAddTitleHeader() {
+    const newCol = {
+      id: `title${this.duplicateTitleHeaderCount++}`,
+      name: 'Title',
+      field: 'title',
+      editor: {
+        model: Editors.text,
+        required: true,
+        validator: myCustomTitleValidator, // use a custom validator
+      },
+      sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true }
+    };
+    this.columnDefinitions.push(newCol);
+    this.columnDefinitions = this.columnDefinitions.slice();
+  }
+
   setAutoEdit(isAutoEdit) {
     this.isAutoEdit = isAutoEdit;
     this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -243,17 +243,11 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
       }
     }
 
-    // for convenience, we provide the property "editor" as an Angular-Slickgrid editor complex object
+    // for convenience to the user, we provide the property "editor" as an Angular-Slickgrid editor complex object
     // however "editor" is used internally by SlickGrid for it's own Editor Factory
     // so in our lib we will swap "editor" and copy it into a new property called "internalColumnEditor"
     // then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
-    this._columnDefinitions = this._columnDefinitions.map((column: Column | any) => {
-      // on every Editor that have a "collectionAsync", resolve the data and assign it to the "collection" property
-      if (column.editor && column.editor.collectionAsync) {
-        this.loadEditorCollectionAsync(column);
-      }
-      return { ...column, editor: column.editor && column.editor.model, internalColumnEditor: { ...column.editor } };
-    });
+    this._columnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(this._columnDefinitions);
 
     // save reference for all columns before they optionally become hidden/visible
     this.sharedService.allColumns = this._columnDefinitions;
@@ -699,6 +693,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
    * If using i18n, we also need to trigger a re-translate of the column headers
    */
   updateColumnDefinitionsList(newColumnDefinitions) {
+    // map/swap the internal library Editor to the SlickGrid Editor factory
+    newColumnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(newColumnDefinitions);
+
     if (this.gridOptions.enableTranslate) {
       this.extensionService.translateColumnHeaders(false, newColumnDefinitions);
     } else {
@@ -748,6 +745,22 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     }
   }
 
+  /**
+   * For convenience to the user, we provide the property "editor" as an Angular-Slickgrid editor complex object
+   * however "editor" is used internally by SlickGrid for it's own Editor Factory
+   * so in our lib we will swap "editor" and copy it into a new property called "internalColumnEditor"
+   * then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
+   */
+  private swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column[]) {
+    return columnDefinitions.map((column: Column | any) => {
+      // on every Editor that have a "collectionAsync", resolve the data and assign it to the "collection" property
+      if (column.editor && column.editor.collectionAsync) {
+        this.loadEditorCollectionAsync(column);
+      }
+      return { ...column, editor: column.editor && column.editor.model, internalColumnEditor: { ...column.editor } };
+    });
+  }
+
   /**
    * Update the Editor "collection" property from an async call resolved
    * Since this is called after the async call resolves, the pointer will not be the same as the "column" argument passed.