How to hide expand and collapse icon when the child has no records in Hierarchy Grid?

[Mohammed Farook J]

Hi All,

 

Greetings from  Syncfusion products. 

 

We have achieved your requirement “Hide the expand/collapse icon which parent row has no child record” using rowDataBound event in Grid. In this event triggers every time a request is made to access row information, elements, or data. This will be triggered before the row element is appended to the Grid element. Please refer to the following code example and Help documentation, 

 

Code example: 

 

[Grid] 

<ejs-grid #Grid id='Grid' [dataSource]='parentData' (rowDataBound)='rowDataBound($event)' [childGrid]='childGrid'> 

        <e-columns> 

.   .   . 

        </e-columns> 

    </ejs-grid> 

 

[ts file] 

rowDataBound(args:any){ 

             var filter = args.data.EmployeeID; 

            var data = new DataManager(this.childData).executeLocal(new Query().where("EmployeeID", "equal", parseInt(filter), true)); 

            if (data.length == 0) { 

             //here hide which parent row has no child records 

                args.row.querySelector('td').innerHTML=" "; 

                args.row.querySelector('td').className = "e-customizedExpandcell"; 

                

            } 

        } 

 

    } 

[app.component.css] 

        

        .e-row[aria-selected="true"] .e-customizedExpandcell { 

          background-color: #e0e0e0; 

        } 

          .e-grid.e-gridhover tr[role='row']:hover { 

           background-color: #eee; 

          } 

        

 

Help Documentation: 

https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#rowdatabound 

 

We have also prepared a sample for your convenience which can be referred from following link,                                                                                                                                        

 

Sample: https://stackblitz.com/edit/angular-cuzxrz?file=app.component.ts

 

 

Please let us know if you have any further assistance with this. 

 

Regards, 

J Mohammed Farook