An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Some of Our Sources
- Engadget
- Simplebits
- Web Designer Wall
- Abduzeedo
- FanExtra - PSD
- Noupe
- Crazy Leaf Design
- Fudge Graphics
- Specky Boy
- Android Dissected
Help Webnuz
Referal links:
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' }, ];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:
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.
Original Link: https://dev.to/ilyoskhuja/freez-filter-and-showhide-column-in-syncfusion-angular-treegrid-50nj
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To