DEV Community

Cover image for Freez , filter and show/hide column in Syncfusion Angular TreeGrid
Ilyoskhuja
Ilyoskhuja

Posted on

2 2

Freez , filter and show/hide column in 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' },
    ];
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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;');

    }
  }
Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
Enter fullscreen mode Exit fullscreen mode

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

Image description

Image description

Image description

Image description

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.

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up