Add Update and Delete Columns at run time

[Akshay]

Dear syncfusion,

I want to perform operations like add, update and delete on columns but I am unable to find such functionality can you please guide me?

[Jagadesh Ram Raajkumar]

Hi Akshay, 

Greetings from Syncfusion Support. 

Based on your requirement we have prepared a sample. In the below code example, we can add an object with the column’s properties to the columns property of the tree grid. Similarly, you can change the header text and other column’s property of a column by using getColumnByField method and change column’s property based on your requirement. You can delete any column using splice method and in the below code example we have delete the ‘duartion’ column when we click the delete button. 

Refer the below code example. 

[app.component.html] 

    <button ej-button  (click)= 'click()'>Change Header Text</button> 

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

    <button ej-button  (click)= 'delete()'>DELETE</button> 

    <ejs-treegrid #treegrid [dataSource]='data' allowPaging='true' childMapping='subtasks' height='350' [treeColumnIndex]='1'> 

        <e-columns> 

…        </e-columns> 

    </ejs-treegrid> 

[app.component.ts] 

    add() {        var obj = { field: "priority", headerText: 'NewColumn', width: 120 };        this.treegrid.columns.push(obj as any);   //you can add the columns by using the treeGrid columns method        this.treegrid.refreshColumns();          }       delete() {

        this.treegrid.columns.filter((i,x) => {  

            if(i.field == 'duration') { 

            this.treegrid.columns.splice(x,1); //you can simply remove based on field name or an index of a column 

        } 

        }); 

        this.treegrid.refreshColumns(); 

          }       click() {        const column = this.treegrid.getColumnByField('duration'); // get the JSON object of the column corresponding to the field name        column.headerText = 'Changed Text'; // assign a new header text to the column        this.treegrid.refreshColumns();    }

 

Please refer to the sample and documentation,
Sample: https://stackblitz.com/edit/angular-jw9qnx?file=app.component.ts
https://ej2.syncfusion.com/angular/documentation/api/treegrid/#refreshcolumns
https://ej2.syncfusion.com/angular/documentation/api/treegrid/#getcolumnheaderbyfield

Please get back to us for further assistance. 

Regards,
Jagadesh Ram