fix: updating columns should include internal plugin columns (#2607)

* fix: updating columns should include internal plugin columns

Author: ghiscoding

demos/aurelia/src/examples/slickgrid/example03.ts

@@ -598,15 +598,6 @@ export class Example03 {
     // you can dynamically add your column to your column definitions
     // and then use the spread operator [...cols] OR slice to force Aurelia to review the changes
     this.columns.push(newCol);
-
-    // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-    // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-    // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-    /*
-    const allColumns = this.aureliaGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    this.columns = [...allColumns]; // (or use slice) reassign to column definitions for Aurelia to do dirty checking
-    */
   }
 
   dynamicallyRemoveLastColumn() {

demos/aurelia/src/examples/slickgrid/example12.ts

@@ -270,16 +270,9 @@ export class Example12 {
       params: { useFormatterOuputToFilter: true },
     };
     this.columns.push(newCol);
-    this.columns = this.columns.slice(); // or use spread operator [...cols]
 
-    // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-    // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-    // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-    /*
-    const allColumns = this.aureliaGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    this.columns = [...allColumns]; // (or use slice) reassign to column definitions for Aurelia to do dirty checking
-    */
+    // use slice spread operator [...cols] to trigger dirty checking
+    this.columns = this.columns.slice();
   }
 
   exportToExcel() {

demos/aurelia/src/examples/slickgrid/example16.ts

@@ -204,12 +204,9 @@ export class Example16 {
         },
       ];
 
-      // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-      // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-      // for example if you use the Checkbox Selector (row selection), you MUST use the code below
+      // use slice or spread reassign to column definitions to trigger dirty checking
       const allColumns = this.aureliaGrid.gridService.getAllColumnDefinitions();
-      allColumns.unshift(newCols[0], newCols[1]);
-      this.columns = [...allColumns]; // (or use slice) reassign to column definitions for Aurelia to do dirty checking
+      this.columns = [...newCols, ...allColumns];
     }
   }
 

demos/react-fluent/src/examples/slickgrid/Example02.tsx

@@ -208,12 +208,8 @@ const Example02: React.FC = () => {
         },
       ];
 
-      // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-      // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-      // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-      const allColumns = reactGridRef.current?.gridService.getAllColumnDefinitions() || [];
-      allColumns.unshift(newCols[0], newCols[1]);
-      setColumns([...allColumns]); // (or use slice) reassign to column definitions for React to do dirty checking
+      // use slice or spread reassign to column definitions to trigger dirty checking
+      setColumns([...newCols]);
     }
   }
 

demos/react/src/examples/slickgrid/Example03.tsx

@@ -592,17 +592,8 @@ const Example3: React.FC = () => {
     };
 
     // you can dynamically add your column to your column definitions
-    // and then use the spread operator [...cols] OR slice to force React to review the changes
+    // and then use the spread operator [...cols] OR slice to force dirty checking
     setColumns([...columns!, newCol]);
-
-    // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-    // you MUST use 'getAllColumnDefinitions()' from the GridService, using this will be ALL columns including the 1st column that is created internally
-    // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-    /*
-    const allColumns = reactGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    columns = [...allColumns]; // (or use slice) reassign to column definitions for React to do dirty checking
-    */
   }
 
   function dynamicallyRemoveLastColumn() {

demos/react/src/examples/slickgrid/Example12.tsx

@@ -218,7 +218,7 @@ const Example12: React.FC = () => {
 
   function dynamicallyAddTitleHeader() {
     // you can dynamically add your column to your column definitions
-    // and then use the spread operator [...cols] OR slice to force React to review the changes
+    // and then use the spread operator [...cols] OR slice to force dirty checking
     const newCol = {
       id: `title${duplicateTitleHeaderCount++}`,
       field: 'id',
@@ -231,16 +231,8 @@ const Example12: React.FC = () => {
     };
     columns.push(newCol);
 
-    setColumns(columns.slice()); // or use spread operator [...cols]
-
-    // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-    // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-    // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-    /*
-    const allColumns = reactGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    columns = [...allColumns]; // (or use slice) reassign to column definitions for React to do dirty checking
-    */
+    // use slice spread operator [...cols] to trigger dirty checking
+    setColumns(columns.slice());
   }
 
   function exportToExcel() {

demos/react/src/examples/slickgrid/Example16.tsx

@@ -203,12 +203,9 @@ const Example16: React.FC = () => {
         },
       ];
 
-      // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-      // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-      // for example if you use the Checkbox Selector (row selection), you MUST use the code below
+      // use slice or spread reassign to column definitions to trigger dirty checking
       const allColumns = reactGridRef.current?.gridService.getAllColumnDefinitions() || [];
-      allColumns.unshift(newCols[0], newCols[1]);
-      setColumns([...allColumns]); // (or use slice) reassign to column definitions for React to do dirty checking
+      setColumns([...newCols, ...allColumns]);
     }
   }
 

demos/vanilla/src/examples/example07.ts

@@ -612,27 +612,10 @@ export default class Example07 {
     // you can dynamically add your column to your column definitions
     // and then use the spread operator [...cols] OR slice to force the framework to review the changes
     this.sgb.columnDefinitions.push(newCol);
-
-    // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-    // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-    // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-    /*
-      const allOriginalColumns = this.sgb.gridService.getAllColumnDefinitions();
-      allOriginalColumns.push(newCol);
-      this.sgb.columnDefinitions = [...allOriginalColumns]; // (or use slice) reassign to column definitions for framework to do dirty checking
-    */
   }
 
   dynamicallyRemoveLastColumn() {
     this.sgb.columnDefinitions.pop();
-
-    /*
-    const allColumns = this.slickerGridInstance.gridService.getAllColumnDefinitions();
-    // remove your column from the full set of columns
-    // and use slice or spread [...] to trigger a dirty change
-    allOriginalColumns.pop();
-    this.sgb.columnDefinitions = allOriginalColumns.slice();
-    */
   }
 
   hideFinishColumnDynamically() {

demos/vue/src/components/Example03.vue

@@ -586,14 +586,6 @@ function dynamicallyAddTitleHeader() {
 
   // you can dynamically add your column to your column definitions
   columns.value.push(newCol);
-
-  // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-  // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-  // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-  /*
-    const allColumns = vueGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    */
 }
 
 function dynamicallyRemoveLastColumn() {

demos/vue/src/components/Example12.vue

@@ -259,15 +259,6 @@ function dynamicallyAddTitleHeader() {
   };
   columns.value.push(newCol);
   columns.value = columns.value.slice(); // or use spread operator [...cols]
-
-  // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
-  // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
-  // for example if you use the Checkbox Selector (row selection), you MUST use the code below
-  /*
-    const allColumns = vueGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    columns.value = [...allColumns]; // (or use slice) reassign to column definitions for Vue to do dirty checking
-    */
 }
 
 function exportToExcel() {