How to edit Column in angular tree grid ?

[Shivam]

Right-click (mouse) or long-press (mobile) a "Column Header" :  User can set (via a dialog) a column's Name, Data Type (Text / Num / Date / Boolean / DropDownList), Default-Value (of current Data Type), Minimum-Column-Width (when screen shrank), Font-size, Font-color, Background-color, Alignment, Text-wrap.

[Pon Selva Jeganathan]

Hi Shivam,    

 

Thanks for contacting syncfusion forum. 

  

Query: Right-click (mouse) or long-press (mobile) a "Column Header" :  

 

Based on your query we suggest you use the custom context menu of the treegrid and dialog component. And, you can update column’s name, type, data type, width, font-size, font-color using column property with treegrid instance.

Please refer to the below code snippet, 

 

 

App.module.ts 

 

… 

import { AppComponent } from './app.component'; 

import { FormsModule } from '@angular/forms'; 

import { DialogModule } from '@syncfusion/ej2-angular-popups'; 

/** 

 * Module 

 */ 

@NgModule({ 

    imports: [ 

        BrowserModule, 

        TreeGridModule, GridAllModule, 

        FormsModule  ,ContextMenuModule,DialogModule   ], 

    declarations: [AppComponent], 

    bootstrap: [AppComponent], 

    providers: [PageService, 

                SortService, 

                FilterService] 

}) 

export class AppModule { } 

 

 

 

App.component.html 

…….. 

  <div #container class='root-container'></div> 

  <ejs-dialog id='dialog' #ejDialog (overlayClick)="onOverlayClick()"  isModal='true' [visible]='false' 

  content='This is a dialog' [target]='targetElement' width='250px'> </ejs-dialog> 

 

 

App.component.ts 

 

 

 public initilaizeTarget: EmitType<object> = () => { 

    this.targetElement = this.container.nativeElement.parentElement; //set the target element 

      } 

public onOverlayClick: EmitType<object> = () => { 

    this.ejDialog.hide();  // hide the dialog 

    } 

  columnContextMenuClick(args: MenuEventArgs): void { 

 

    if (args.item.id === 'filter' || args.item.id === 'freeze' || args.item.id === 'sort' || args.item.id === 'chooser') { 

      this.onOffSwitch(args) 

    } else { 

      ….. 

      if(args.item.id === "edit") { 

        this.initilaizeTarget(); 

       this.targetElement = this.col; 

        window.alert("Show edit dialog with form") 

        this.ejDialog.show(); // dialog show 

      } 

 

      if(args.item.id === "name") { 

              this.treegrid.column[2].headerText=”NewColumn” // Change the column’s header text. Here this.treegrid refer the treegrid instance 

        …. 

      } 

    } 

  } 

    

 

 

Please refer to the below help documentation,

https://ej2.syncfusion.com/angular/documentation/treegrid/context-menu/

https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/ 

Please refer to the below demo link,

https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/custom-contextmenu

https://ej2.syncfusion.com/angular/demos/#/bootstrap5/dialog/default

Kindly get back us to further assistance.      

 

Regards,     

Pon selva