Change Column in Syncfusion Treegrid Angular

Syncfusion Angular can help develop angular applications faster with many featured components that look like TreeGrid.

According to the documentation, “Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based true Angular Components. It has support for Ahead Of Time (AOT) compilation and Tree-Shaking. All the components are developed from the ground up to be lightweight, responsive, modular, and touch-friendly.”

In this article, learn how to change column style in Syncfusion Angular TreeGrid (“Current column Data-Type (Text/Num/Date/Boolean/DropDownList”), Default-Value (of current DataType), Font-size, Font-color , Background-color, Alignment, Text-wrap, Minimum-Column-Width (when screen shrinked.)”)

Firstly, we create an angular project and add Syncfusion to the project using the getting started guide. For this example, I will use stackblitz.com and you can also start with some examples from documentation like this.

In this project, we will change the column (Name, Type, background-color, font-color, Alignment, Text-wrap). To add a context menu to our project, in appcomponent.ts add the code below:

export class AppComponent {
    public data: Object[] = [];
    public contextMenuItems: Object;
  
  	ngOnInit(): void {
        this.data = sortData;
        this.contextMenuItems = [
            { text: "EditCol ", target: ".e-headercontent", id: "editCol" },];
    }
}

In app.component.html we change <ejs-treegrid ... > code below

  <ejs-treegrid
    #treegrid
    [dataSource]="data"
    allowPaging="true"
    childMapping="subtasks"
    height="350"
    [treeColumnIndex]="0"

    [contextMenuItems]="contextMenuItems"
    (contextMenuOpen)="contextMenuOpen($event)"
    (contextMenuClick)="contextMenuClick($event)"
    [columns]="treeColumns"
    >

We need to add “DialogModule” to app.module.ts in the project, which you can import from ‘@syncfusion/ej2-angular-popups‘. After that, we create variable ejDialog in app.component.ts.

@ViewChild("ejDialog") ejDialog: DialogComponent;

For showing dialog we use “this.ejDialog.show();” and for hiding we use “this.ejDialog.hide();

Here we have an ejs-dialog tag for showing the dialog

 <ejs-dialog
      id="dialog"
      #ejDialog
      [animationSettings]="animationSettings"
      header="Edit Column"
      [target]="targetElement"
      width="300px"
      [showCloseIcon]="showCloseIcon"
    >
      <ng-template #content>
        <form id="template_driven" #userForm="ngForm" novalidate>
          <div class="form-group" style="padding-top: 11px;">
            <div class="e-float-input">
              <input
                type="text"
                name="ColName"
                required
                [(ngModel)]="ColName"
                #ColumnName="ngModel"
              />
              <span class="e-float-line"></span>
              <label class="e-float-text e-label-top" for="name">Name</label>
              <div
                *ngIf="ColumnName.invalid && (ColumnName.dirty || ColumnName.touched)"
              >
                <div class="e-error" *ngIf="ColumnName.errors.required">
                  * Enter Column name
                </div>
              </div>
            </div>
          </div>

          <div class="form-group" style="padding-top: 11px;">
            <div class="e-float-input">
              <ejs-dropdownlist
                
                id="coltypeid"
                [dataSource]="d2data"
                [fields]="fields"
                placeholder="Type"
                name="ColType"
                [(ngModel)]="ColType"
              ></ejs-dropdownlist>
              </div>
          </div>

          <div class="form-group" style="padding-top: 11px;">
            <div style="display: flex; justify-content: space-between;">
              <span class="e-float-text e-label-top"
                >Choose new Font-color</span
              >

              <input
                ejs-colorpicker
                type="color"
                id="element"
                value="#FFFFFF"
                (change)="changeFontColor($event)"
                id="colorpicker"
              />
            </div>
          </div>
          <div class="form-group" style="padding-top: 11px;">
            <div style="display: flex; justify-content: space-between;">
              <span class="e-float-text e-label-top"
                >Choose new Background-color</span
              >

              <input
                ejs-colorpicker
                type="color"
                id="element"
                value="#FFFFFF"
                (change)="changeBackground($event)"
                id="colorpicker"
              />
            </div>
          </div>
          <div class="form-group" style="padding-top: 11px;">
            <div class="e-float-input">
              <ejs-dropdownlist
                #dropdown2
                id="element"
                [dataSource]="d3data"
                [fields]="fields"
                name="ColAlign"
                [(ngModel)]="ColAlign"
                placeholder="Alignment"
              ></ejs-dropdownlist>
            </div>
          </div>
          <div class="form-group" style="padding-top: 11px;">
            <div style="display: flex; justify-content: space-between;">
              <span class="e-float-text e-label-top" for="email"
                >Text-wrap</span
              >

              <ejs-checkbox
                labelPosition="Before"
                [checked]="false"
                name="ColChecked"
                [(ngModel)]="ColChecked"
              ></ejs-checkbox>
            </div>
          </div>
        </form>
      </ng-template>
      <ng-template #footerTemplate>
        <div>
          <button
            id="Button1"
            class="e-control e-btn e-primary e-flat"
            (click)="saveColumn($event)"
            data-ripple="true"
          >
            <span class="e-btn-icon e-icons e-ok-icon e-icon-left"></span>Save
          </button>
          <button
            id="Button2"
            class="e-control e-btn e-flat"
            (click)="btnclick($event)"
            data-ripple="true"
          >
            <span class="e-btn-icon e-icons e-close-icon e-icon-left"></span
            >Cancel
          </button>
        </div>
      </ng-template>
    </ejs-dialog>

The result looks like the image below:

Syncfusion Treegrid Column Change

And for selecting color we use module “ColorPickerModule‘ from ‘@syncfusion/ej2-angular-inputs‘ also we need to add to app.module.ts.

Syncfusion Treegrid Column Change Colorpicker We create a “saveColumnfunction for saving changes in the column.

...
 public saveColumn() {
    if (this.checkNewEdit == 'edit') {
      var catched = false;

     
      
      this.treeColumns.forEach((r) => {
      
        if (!catched) {
          catched = true;
          var style = document.createElement('style');
          style.type="text/css";
          style.innerHTML = `.e-treegrid .e-headercell.cssClassaa { background-color: ${this.ColBColor}; 
            color:${this.ColFColor};
          }`;
          document.body.append(style);
        }

        if (r.field == this.columnField) {
       
          r.headerText = this.ColName;
          r.type = this.ColType;
          r.textAlign = this.ColAlign;
          r['customAttributes'] = { class: 'cssClassaa' };
        }
      });

   
      this.treegrid.refreshColumns();
      this.textWrap = this.ColChecked;
    }


    this.ejDialog.hide();
  }
...

Let’s change the first column:

Syncfusion Treegrid Column Change

And we can see the result as below:

Syncfusion Treegrid Column Change Results

In this article, we saw how to change the properties of columns. Hopefully, this tutorial is useful for people who are learning Syncfusion Angular.

You can find the source code here.

.

Leave a Comment