Freez , filter and show/hide column in Syncfusion Angular TreeGrid

#syncfusion #angular #treegrid

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,we learn how to freez,show/hide and filter column in Syncfusion Angular TreeGrid . I will create backend Api with nodejs, but in this article I will show Syncfusion Angular Treegrid.

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.

To add a context menu to our project, in appcomponent.ts add the code below:

this.contextMenuItems = [
      { text: 'Show', target: '.e-headercontent', id: 'columnChooser' },
      { text: 'Freeze', target: '.e-headercontent', id: 'freeze' },

      { text: 'Filter', target: '.e-headercontent', id: 'filter' },
    ];

In app.component.html we change code below :

 <ejs-treegrid
    #treegrid
    [dataSource]="data"
    [treeColumnIndex]="1"

    [allowFiltering]="filtering"
    [allowSorting]="sorting"
    [sortSettings]='sortSettings' 
    [allowResizing]="true"
    [allowTextWrap]="textWrap"
    allowReordering="true"
    [allowRowDragAndDrop]="true"
    [editSettings]="editSettings"
    [allowSelection]="true"
    [selectionSettings]="selectionOptions"
    [toolbar]="toolbar"
    [pageSettings]="pageSettings"
    [filterSettings]="filterSettings"
    height="100vh"
    width="100vw"
    idMapping="TaskID"
    parentIdMapping="ParentItem"
    hasChildMapping="isParent"
    [contextMenuItems]="contextMenuItems"
    (contextMenuOpen)="contextMenuOpen($event)"
    (contextMenuClick)="contextMenuClick($event)"
    (dataBound)="dataBound()"
    (toolbarClick)="toolabarclickHandler($event)"
    (actionBegin)="actionBegin($event)"
    (actionComplete)="actionComplete($event)"
    [columns]="treeColumns"
    (rowSelected)="rowSelected($event)"
  >
  </ejs-treegrid>

We will create contextMenuOpen function like the code below:

contextMenuOpen(arg?: BeforeOpenCloseEventArgs): void {
    this.rowIndex = arg.rowInfo.rowIndex;
    let elem: Element = arg.event.target as Element;


    if (elem.closest('.e-column')) {

      document
        .querySelectorAll('li#freeze')[0]
        .setAttribute('style', 'display: block;');
      document
        .querySelectorAll('li#columnChooser')[0]
        .setAttribute('style', 'display: block;');
      document
        .querySelectorAll('li#filter')[0]
        .setAttribute('style', 'display: block;');

    }
  }

For menu event we write function contextMenuClick code below:

 contextMenuClick(args): void {
    if (args.item.id === 'columnChooser') {
      this.showChooser = !this.showChooser;
    } else if (args.item.id === 'filter') {
      this.filtering = true;
      console.log('this.filtering:', this.filtering);
    } else if (args.item.id === 'freeze') {
      this.treegrid.frozenColumns = this.columnValue;
    }
  }

Now our app can freez, filter and show/hide columnlike in the image below: