Nested grid header not visible and hide arrow if no child element
10 Replies
Hi Neha,
Greetings from syncfusion support
Based on your shared information we suspect that you want render table in detail Template with separate child and parent dataSource. To achieve your requirement, we have loaded child Grid’s dataSource using detailDataBound event.
Please refer to the below code and sample link for more reference.
Note: We have loaded local data to the parent and remote data to the child Grid.
|
<ejs-grid #grid [dataSource]='employeeData' (detailDataBound)='detailDataBound($event)' id='Grid'>
<ng-template #detailTemplate let-data>
<div class='custom-grid'></div>
</ng-template>
<e-columns>
. . . . . . . . . . .
</e-columns>
</ejs-grid>
|
|
detailDataBound(e) {
this.predicate = new Predicate("EmployeeID", "equal", e.data["EmployeeID"]);
this.data = new DataManager({
url:
adaptor: new ODataV4Adaptor()
})
.executeQuery(new Query().where(this.predicate))
.then(e => {
// you can add you data as per your needs
this.gridObj.dataSource = (e as any).result;
});
let detail = new Grid({
columns: [
{ field: "OrderID", headerText: "Order ID", width: 110 },
{ field: "CustomerID", headerText: "Customer Name", width: 140 },
{ field: "ShipCountry", headerText: "Ship Country", width: 150 }
]
});
detail.appendTo(<HTMLElement>e.detailElement.querySelector(".custom-grid"));
this.gridObj = e.detailElement.getElementsByClassName("e-grid" )[0].ej2_instances[0];
}
|
By default, the expand icon will be visible even if the child grid is empty. You can use rowDataBound event to hide the icon when there are no records in child grid.
To hide the expand icon in parent row when no records in child grid, follow the given steps:
Create CSS class with custom style to override the default style of Grid.
|
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
|
Add the CSS class to the Grid in the rowDataBound event handler of Grid.
|
rowDataBound(e: any) {
var argument: any = e;
this.initPredit = new Predicate("EmployeeID", "equal", e.data["EmployeeID"]);
this.checkdata = new DataManager({
url:
adaptor: new ODataV4Adaptor()
}).executeQuery(new Query().where(this.initPredit)).then((e) => {
if((e as any).result.length === 0) { //if the result length is zero, we have added the class to the
console.log(argument); td for hiding the expand icon
argument.row.querySelector('td').innerHTML= '';
argument.row.querySelector('td').className = 'e-customizedExpandcell';
}
});
}
|
Screenshot:
Regards,
Rajapandi R
Rajapandi R
Hi Neha,
Based on your sampleData we have prepared a sample with HTML way and achieved your requirement by using rowDataBound event of Grid. Please refer the below code example, sample and documentation for more information.
|
Index.html
<style>
.e-row[aria-selected="true"] .e-customizedExpandcell {
background-color: #e0e0e0;
}
.e-grid.e-gridhover tr[role='row']:hover {
background-color: #eee;
}
</style> |
|
App.component.ts
rowDataBound(args) {
if(args.data.deviceAlertRules.length == 0) {
//here hide which parent row has no child records
args.row.querySelector('td').innerHTML=' ';
args.row.querySelector('td').className = 'e-customizedExpandcell';
}
}
|
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/hide-the-expand-collapse-icon-in-parent-row/
Screenshot:
If still you are facing the issue, we can setup a web meeting to look on to the problem. Please let us know your availability for web meeting tomorrow Tuesday (13th July 2021). Based on that we can schedule a web meeting with you to look into the reported problem in your machine.
Regards,
Rajapandi R
Rajapandi R
SIGN IN To post a reply.
