When we dynamically add column next to id then Drop Down Comes in that new column

[Ayush]

hello 

I am using syncfusion treegrid in angular and i have to implement the add column which is on right click of that column header. so now issue is that it is working fine on other column but when we try to add the new column the dropdown comes in that column . and this issue is comin on only one column which is named as taskid.so can ypu tell me how we can solve that issue because it is in built feature of that childmapping in which drop dropdown comes.

Below i have added images you can see the issue. 

Attachment: Dropdownissue_d51587de.zip

[Pon Selva Jeganathan]

Hi Ayush,

Thanks for contacting syncfusion forum

Query:When we dynamically add column next to id then Drop Down Comes in that new column

Based on your query and screenshot, we suspect that you don’t want the expand/collapse icon (drop down) to appear on the newly added column.

Based on the screenshot of your shared code example, you defined the treeColumnIndex as 1. Then you add a new column at position '1', and the expand/collapse icon is rendered at the new column. Because in treegrid, the expand/collapse icon is rendered based on the treeColumnIndex. So, the expand/collapse icon is rendered at the new column.

If you don't want the expand/collapse icon to appear on the newly added row. We suggest you change the treeColumnIndex value after adding the new column.

Please refer to the below code snippet,

 

 <button ej-button (click)="add()">ADD</button>

 

  <ejs-treegrid

    #treegrid

    [dataSource]="data"

    allowPaging="true"

    childMapping="subtasks"

    height="350"

    [treeColumnIndex]="1"

  >

 

 

App.component.ts

 

add() {

    var obj = { field: 'New_column', headerText: 'NewColumn', width: 120 };

    var col = this.treegrid.columns;

    col.splice(1, 0, obj);

    this.treegrid.columns = col; //you can add the columns by using the treeGrid columns method

    this.treegrid.refreshColumns(); // refresh the column after adding a new row

    var inx = this.treegrid.treeColumnIndex; // get the current treeColumnIndex value

    this.treegrid.treeColumnIndex = ++inx; // set the new treeColumnIndex value

  }

 

In the above code example, we set the new treeColumnIndex value after adding a column in button click.

Please refer to the below sample,

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

Please refer to the below screenshot,

Initial rendering:

After adding a new column:

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid/#treecolumnindex

If we misunderstand your requirement, kindly share the detailed explanation of your issue and share the video demo of your issue and share the code example(both ts and html) which is helpful to proceed further.

Please get back to us if you need more assistance. 

Regards, 

Pon selva

[Ayush]

hi Pon Selva Jegnathan 

Thanks for your solution but when i am trying to add the new column using these code on task id dropdown doesn't comes. next column but when try to add the new column on the task Name then the dropdown comes on next to task Name column. Below i have added the screenshot of the issue.

Attachment: treegridiisue_c131fb84.zip

[Pon Selva Jeganathan]

Hi Ayush,

Thanks for the update

Query:next column but when try to add the new column on the task Name then the dropdown comes on next to taskName column

As we already said, if you add a new column at position '1' and set treeColumnIndex to '1,' the expand/collapse icon is rendered at the new column, which is the treegrid's default behavior.

If you don't want the expand/collapse icon to appear on the newly added row. We suggest you change the treeColumnIndex value after adding the new column.

Please refer to the below code snippet,

 

 <button ej-button (click)="add()">New column</button>

  <button ej-button (click)="add1()">ADD column</button>

 

  <ejs-treegrid

    #treegrid

    [dataSource]="data"

    allowPaging="true"

    childMapping="subtasks"

    height="350"

    [treeColumnIndex]="1"

  >

….

 

add() {

    var obj = {

      field: 'New_column' + this.splice_inx,

      headerText: 'NewColumn' + this.splice_inx,

      width: 75,

    };

    this.flag = false;

    this.Changetreeinx(obj);

  }

  add1() {

    var obj = {

      field: 'Addcolumn' + this.splice_inx,

      headerText: 'AddColumn' + this.splice_inx,

      width: 75,

    };

    this.flag = true;

    this.Changetreeinx(obj);

  }

 

  Changetreeinx(obj) {

    var col = (this.treegrid as any).columns;

    let addcol_inx;

    let newcol_inx;

    // here added new columns

    if (this.flag == true) {

      col.splice(this.splice_inx, 0, obj);

      (this.treegrid as any).columns = col; //you can add the columns by using the treeGrid columns method

      (this.treegrid as any).refreshColumns(); // refresh the column after adding a new row

    } else if (this.flag == false) {

      var task_inx = col.findIndex((x) => x.field == 'taskName');

      col.splice(task_inx + 1, 0, obj);

      (this.treegrid as any).columns = col; //you can add the columns by using the treeGrid columns method

      (this.treegrid as any).refreshColumns(); // refresh the column after adding a new row

    }

 

   var task_inx = col.findIndex((x) => x.field == 'taskName'); //get the taskName index

    (this.treegrid as any).treeColumnIndex = task_inx; // set the taskName column index as treecolumn index

}

 

In the above code example, we set the new treeColumnIndex value after adding a column in button click. Initially we set the treeColumnIndex as ‘1’. We collect the index value of taskName column. Then we set taskName column index value to the treecolumn index value.

Please refer to the below sample,

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

Please refer to the below screenshot,

Initial rendering:

After adding a new column:

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid/#treecolumnindex

Please get back to us if you need more assistance. 

Regards, 

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.