d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

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 “saveColumn” function 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.

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this