fix: updating columns should include internal plugin columns

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() {

demos/vue/src/components/Example16.vue

@@ -195,12 +195,9 @@ function addEditDeleteColumns() {
       },
     ];
 
-    // 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 = vueGrid.gridService.getAllColumnDefinitions();
-    allColumns.unshift(newCols[0], newCols[1]);
-    columns.value = [...allColumns]; // (or use slice) reassign to column definitions for Vue to do dirty checking
+    columns.value = [...newCols, ...allColumns];
   }
 }
 

docs/grid-functionalities/row-selection.md

@@ -379,4 +379,7 @@ this.columns = allColumns.slice(); // or use spread operator [...cols]
 
 // you could also use SlickGrid setColumns() method
 // this.sgb.slickGrid.setColumns(cols);
-```
+```
+
+> **Note**
+> The code above is no longer necessary with v10.8.0 and above, the lib will now take care of that for you.

frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md

@@ -391,6 +391,9 @@ addNewColumn() {
 }
 ```
 
+> **Note**
+> The code above is no longer necessary with v10.8.0 and above, the lib will now take care of that for you.
+
 ## Row Detail with Inner Grid
 
 You can also add an inner grid inside a Row Detail, however there are a few things to know off and remember. Any time a Row Detail is falling outside the main grid viewport, it will be unmounted and until it comes back into the viewport which is then remounted. The process of unmounting and remounting means that Row Detail previous states aren't preserved, however you could use Grid State & Presets to overcome this problem.

frameworks/angular-slickgrid/docs/grid-functionalities/row-selection.md

@@ -347,3 +347,6 @@ addNewColumn() {
   // this.angularGrid.slickGrid.setColumns(cols);
 }
 ```
+
+> **Note**
+> The code above is no longer necessary with v10.8.0 and above, the lib will now take care of that for you.

frameworks/angular-slickgrid/src/demos/examples/example03.component.ts

@@ -653,16 +653,9 @@ export class Example3Component implements OnInit {
     // you can dynamically add your column to your column definitions
     // and then use the spread operator [...cols] OR slice to force Angular to review the changes
     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.angularGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    this.columns = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
-    */
+    // use slice spread operator [...cols] to trigger dirty checking
+    this.columns = this.columns.slice();
   }
 
   dynamicallyRemoveLastColumn() {

frameworks/angular-slickgrid/src/demos/examples/example12.component.ts

@@ -275,16 +275,9 @@ export class Example12Component implements OnInit, OnDestroy {
       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.angularGrid.gridService.getAllColumnDefinitions();
-    allColumns.push(newCol);
-    this.columns = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
-    */
+    // use slice spread operator [...cols] to trigger dirty checking
+    this.columns = this.columns.slice();
   }
 
   exportToExcel() {

frameworks/angular-slickgrid/src/demos/examples/example16.component.ts

@@ -201,12 +201,9 @@ export class Example16Component implements OnInit {
         },
       ];
 
-      // 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.angularGrid.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];
     }
   }