Dynamically added column in Treegrid not able to render the template

[Tarun]

Hi,

I am trying to add a dynamic column in the treegrid following the below example

https://stackblitz.com/edit/angular-jw9qnx?file=app.component.ts

But there is one issue I am facing, I have a template set for the initial columns and they are rendering fine with the template but the newly added column is not able to render the content as per the template because I think the template is not getting set for the dynamic columns.

Below is the html code

<ejs-treegrid [enableVirtualization]=true [height]='screenHeight -45' #treegrid [dataSource]="data"

[treeColumnIndex]="treeColumnIndex" childMapping="subtasks" [allowReordering]="true" (autoCheckHierarchy)='true'

rowHeight=40 [allowMultiSorting]='false'>

<e-columns>

<e-column *ngFor="let column of columns; let i = index" [type]="column.type"

[defaultValue]="column.defaultValue"

[customAttributes]="{style: {color: column.fontColor, fontSize: column.fontSize+'px', backgroundColor: column.backgroundColor, whiteSpace: column.textWrap ?'break-spaces':'nowrap' }}"

[field]="column.field" [headerText]="column.headerText" [textAlign]="column.textAlign"

[maxWidth]="column.minWidth" [isPrimaryKey]="column.field ==='rowId'" [visible]="column.visible">

<ng-template #templatelet-data>

<ejs-dropdownlist *ngIf="column.type ==='dropDownList'" #dropdown1[id]='"ddlelement"+ i' width='120px'

[dataSource]="['Snooker','Tennis','Cricket','Football','Rugby']" [value]='data[column.field] |

formatCell:column.type:column.defaultValue'>

ejs-dropdownlist>

<span *ngIf="column.type !=='dropDownList'">{{data[column.field] |

formatCell:column.type:column.defaultValue}}span>

ng-template>

e-column>

e-columns>

ejs-treegrid>

As you can see I am looping through the columns using `columns` variable.
And below is component code where I am adding a new column on a action.

if (action === 'addCol') {

const clickedColumnIndex: number = this.columns.findIndex(

(col) => col.field === context?.column?.field

);

const newItemIndex = clickedColumnIndex + 1;

// Updating Source data

this.columns.splice(newItemIndex, 0, data);

// Updating treegrid column module

const { fontColor, ...restData } = data;

const columnModuleData = {

...restData,

customAttributes: {

style: {

fontSize: `${fontSize}px`,

},

},

};

this.treegrid.columns.splice(newItemIndex, 0, columnModuleData);

this.treegrid.refreshColumns();

this.treegrid.refresh();

}

Here you can see I tried both ways I updated the column variable which is I am using to loop but nothing happens so I also tried to update the columns using this.treegrid.columns.

This code successfully adds the column but it does not load the desired template.

Please suggest a way.

[Farveen Sulthana Thameeztheen Basha]

Hi Tarun,

Query#:- This code successfully adds the column but it does not load the desired template.

We are able to replicate the problem from your provided code details. In order render template while adding columns dynamically, we need to define the template property for the columns. Refer to the code below:-

App.Component.html:-

 

<ejs-treegrid

    #treegrid

    [dataSource]="data"

    allowPaging="true"

    childMapping="subtasks"

    height="350"

    [treeColumnIndex]="1"

  >

    <e-columns>

      <ng-template #template ngFor let-column [ngForOf]="columns">

        <e-column

          [field]="column.field"

          [type]="column.type"

          headerText="{{ column.headerText }}"

          [allowEditing]="column.allowEditing"

          [isPrimaryKey]="

            column.isPrimaryKey != null ? column.isPrimaryKey : null

          "

          [width]="column.width"

        >

         <ng-template let-data #template1>

            <ejs-dropdownlist

              id="taskName"

              name="taskName"

              [dataSource]="[

                'Snooker',

                'Tennis',

                'Cricket',

                'Football',

                'Rugby'

              ]"

              [value]="data[column.field]"

              [fields]="fields"

              popupHeight="300px"

            >

            </ejs-dropdownlist>

          </ng-template>

        </e-column>

      </ng-template>

    </e-columns>

  </ejs-treegrid>

 

App.Component.ts:-

@ViewChild('template1')

public template1: any;

add() {

    var obj = {

      field: 'priority',

      headerText: 'NewColumn',

      width: 120,

      template: this.template1,

    };

 

       this.treegrid.columns.push(obj as any);

       this.treegrid.refreshColumns();

    }

Modified sample link:- https://stackblitz.com/edit/angular-6snmrx-htbzzq?file=app.component.ts

After following the above, still faced issue, if possible share us the issue replicable sample or replicate the issue in the above shared sample to validate further.

Regards,

Farveen sulthana T

[Tarun]

Hi Farveen, thanks for responding.

The solution provided by you indeed copies the column but the template is not cloned instead of that it is simply replicating the task id column with same task id values in the new column.

See here:
https://stackblitz.com/edit/angular-6snmrx-1k1qxq?file=app.component.ts

[Farveen Sulthana Thameeztheen Basha]

Hi Tarun,

To overcome this problem, we suggest you to render Template for the newly added column based on condition. Refer to the code below:-

<ejs-treegrid

    #treegrid

    [dataSource]="data"

    allowPaging="true"

    childMapping="subtasks"

    height="350"

    [treeColumnIndex]="1"

  >

    <e-columns>

      <ng-template #template ngFor let-column [ngForOf]="columns">

        <e-column

          [field]="column.field"

          [type]="column.type"

          headerText="{{ column.headerText }}"

          [allowEditing]="column.allowEditing"

          [isPrimaryKey]="

            column.isPrimaryKey != null ? column.isPrimaryKey : null

          "

          [width]="column.width"

        >

          <ng-template let-data #template1 *ngIf="column.field === 'priority'">

            <span>{{ data[column.field] }}</span>

          </ng-template>

        </e-column>

      </ng-template>

    </e-columns>

  </ejs-treegrid>

Modified sample link:- https://stackblitz.com/edit/angular-6snmrx-x1czgu?file=app.component.html

Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T

[NieChen]

it's vital that the added col obj must has Width ​​property

[Manivannan Padmanaban]

Hi NieChen,

Thanks for contacting Syncfusion Forums.

Query: it's vital that the added col obj must has Width ​​property

Before proceeding with your query, we would like to share the behavior EJ2 Tree Grid.

By default, the horizontal scrollbar of Grid will be shown only when the total Grid columns width exceeds the Grid’s width. By using width property, you can define the width to Grid. If we don’t provide any width to Grid, then Grid adapts its parent-container width.

For example, consider the Grid having 500px width, the first two columns having width of 100px & 150px and the remaining column’s width is undefined. Now, the first two columns occupy 250px from the Grid’s width. If we didn’t define the width in the column, then default width “auto” is used in that column. So, the remaining 250px is equally shared between all these columns and the horizontal scrollbar doesn’t show in the Grid. Since this is the behavior of Grid.

Suppose if the total columns width exceeds the Grid’s width, then the column contains width as auto is not shown (0px applied to that column) in the Grid. In this case, its mandatory to set the width to the column.

Kindly get back to us if you need further assistance. We will be happy to assist you.

Regards,

Manivannan Padmanaban