Freez , filter and show/hide column in Syncfusion Angular TreeGrid
Tags: syncfusion, angular, treegrid
Published: 2022-02-27 08:00:28

[Syncfusion](https://ej2.syncfusion.com/home/) 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](https://7tueiw--run.stackblitz.io).

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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4u1j4l2xyl4wfs00twz.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gad9r7zg9etbk81icgm3.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyqspc4hmzvxum6gmh82.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4j442h6n6enyh85m5i0.png)

To sum up, in this project, we learned how to use the freez,filter and show/hide columns in Syncfusion Angular TreeGrid. You can find the code [link](https://stackblitz.com/edit/angular-pjznej-freezotherfunc?file=app.component.ts).