Issues when Dynamically Adding Columns

[John Marr]

I am attempting to add columns dynamically to a Tree Grid.  A User pushes a button, provides the fiscal year for the column, and the column is then placed based on a Fiscal Year. The data source object of the tree grid is updated such that each child element has the new column. The new fiscal year shows up in the appropriate position on the tree grid, however the data appears blank. Selecting a row and then clicking any other row results in the data rows vanishing. Leaving the page and then loading it back again the data and columns are where they are supposed to be. 

I have tried setting up a method to update the treegridobject.columns with a new column entry for the fiscal year and updating the index for each of the existing columns, then performing a treegridobject.refreshColumns() but the row data still disappears.

The overall structure of the grid is:
Title | FY 1 | FY 2 |... | FY 7| Column Name 1 | Column Name  2| Column Name 3

The new fiscal year can appear anywhere between Title and Column Name 1. 

Wondering if there is something I am missing with the connection between the source data and the column headers that is preventing the data from showing.

[Farveen Sulthana Thameeztheen Basha]

Hi John Marr,

We are working on this reported problem with high priority and get back to you by on or before 16^th May 2022. Until then we appreciate your patience.

In the meanwhile we will contact you if any details required.

Regards,

Farveen sulthana T

[Farveen Sulthana Thameeztheen Basha]

Hi John Marr,

From your query we suspect that you need to insert the column in between of already existing columns. We have prepared sample by Inserting the column at specific Index on external button click. You can add columns using created event also and refresh the columns using refreshColumns method of the TreeGrid.

Refer to the code below:-

App.Component.ts

 

clicked() : void {

    let columnName = { field: 'priority', width: 100 };

    this.treegrid.columns.splice(2, 0, columnName); //Add the columns

    this.treegrid.refreshColumns();

  }        

 

Sample link:- https://stackblitz.com/edit/angular-mqa5hw-fovwd5?file=app.component.html

If your requirement is different from above or we misunderstood your query, please share more details such as Complete TreeGrid code/Video Demo or Screenshot/ If possible replicate it in the above sample and revert us in order to proceed further.

Regards,

Farveen sulthana T

[John Marr]

Much appreciated.

I'm getting a bit of an inconsistent error still. The data will stay present when a column is added but disappear when I try to edit the values and click elsewhere, or the data will disappear when the column is added with the following error message.

      if (this.selectedForm.yearValues !== undefined && this.selectedForm.yearValues.includes(newColumnName)) {
        //Get the index from the list of year values. And then add one given the static starting column we have.
        var columnIndex = this.selectedForm.yearValues?.indexOf(newColumnName) + 1;
        let columnToAdd = { field: newColumnName, width: 100 }
        this.treeGridObj.columns.splice(columnIndex, 0, columnToAdd);
        this.treeGridObj.refreshColumns();
      }

[Farveen Sulthana Thameeztheen Basha]

Hi John Marr,

We are unable to replicate the problem from the shared sample on previous update(while on Editing as well as on rendering). sample link

Refer to screenshot:-

So we need some more additional details to find the cause of the issue. Share us the following details.

1. Complete TreeGrid code details.
2. Video Demo to replicate the problem.
3. How you have added the columns dynamically.
4. Type of Edit mode you have used.
5. If possible replicate it in the above sample and revert us back.

Regards,

Farveen sulthana T