Hi Parthkumar,
Thanks for your interest in Syncfusion Components.
Query#:- I am using Treegrid control in my Angular 12 application. I would like to hide some row in data visulization.
We have checked your query and achieved your requirement using rowDataBound event of the TreeGrid. In this event, we have hided some rows by applying CSS styles to the row based on condition.
Refer to the code below:-
|
App.Component.html:-
<ejs-treegrid #treegrid
[dataSource]="data"
childMapping="subtasks"
height="350"
[treeColumnIndex]="1"
[allowPaging]="true"
[pageSettings]="pageSettings"
(rowDataBound)="rowDataBound($event)">
<e-columns>
<e-column field="taskID"
headerText="Task ID"
width="70"
textAlign="Right"></e-column>
. . .
</e-columns>
</ejs-treegrid>
App.Component.ts
export class AppComponent {
ngOnInit() : void {
this.data = sampleData;
this.pageSettings = { pageSize: 10 };
}
rowDataBound(args) {
console.log(args);
if (args.data.approved)
{
args.row.style.visibility = 'collapse'; // hide rows when approved data is true/hide rows when approved data is true
}
else
{
args.row.style.visibility = 'visible';
}
}
} |
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
