Hierarchical Binding remove the header of the Child-Grid

Question

By using .net grid, it works as the picture shown below. Now I want to fulfill the same effect by using Angular Grid, however, I have encountered some problems.

I’m using Hierarchical Binding in Angular Grid.

I didn’t find any solutions about how to remove the caption of the Child-Grid and make it to inherit the one of its Parent-Grid.

Ajith Govarthan · Answer

Hi techlandandyzhang, 

Thanks for contacting Syncfusion support. 

Query: I’m using Hierarchical Binding in Angular Grid. I didn’t find any solutions about how to remove the caption of the Child-Grid and make it to inherit the one of its Parent-Grid. 

Based on your query you want to hide the headers of the child grid when you expand the child Grids in your Grid application. So, we have prepared sample in that we have used the detailDataBound event to hide the header table element. For your convenience we have attached the sample please refer them for your reference. 

Code Example: 




App.component.ts 

  ngOnInit(): void { 
    this.parentData = employeeData; 

    this.childGrid = { 
      dataSource: orderDatas, 
      queryString: 'EmployeeID', 
      allowPaging: true, 
      pageSettings: { pageSize: 6, pageCount: 5 }, 

      columns: [ 
        { 
          field: 'OrderID', 
          headerText: 'Order ID', 
          textAlign: 'Right', 
          width: 120 
        }, 
        { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 
        { field: 'Freight', headerText: 'Freight', width: 120 }, 
        { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
      ], 
      childGrid: this.secondChildGrid 
    }; 
  } 
  detailDataBound(args) { 
    args.childGrid.getHeaderTable().style.display = 'none'; //hide the headers here. 
  } 
} 

Sample Link: https://stackblitz.com/edit/angular-snmhxn?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 
Ajith G.

techlandandyzhang · Answer

hi Ajith Govarthan,https://stackblitz.com/edit/angular-snmhxn-qp3w4b?file=app.component.ts   The first Question:     When I set the second child, and using  detailDataBound(),     1. The Icon is too close to text     2. The second child's headers can't hide  The second Question:   how to resizing the child's grid synchronously, when I resizing the main grid?

Ajith Govarthan · Answer

Hi techlandandyzhang, 
  
Thanks for the update. 
  
Query: The Icon is too close to text & The second child's headers can't hide & how to resizing the child's grid synchronously, when I resizing the main grid? 
  
Based on your query you are facing some issues with grid component. So, before we proceed to your query, we have a component called tree Grid in our EJ2 Syncfusion components.  
 
Using the Tree Grid component, you can show the data with tree view and there will not be any default headers for the expanded rows. So, for your convenience we have attached the TreeGrid component’s documentation and sample browsers links, please refer them for your reference. 
  
UG-Links: 
  
https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started/ 
  
https://ej2.syncfusion.com/angular/documentation/treegrid/data-binding/#local-data 
  
https://ej2.syncfusion.com/angular/documentation/treegrid/columns/#column-resizing 
  
SB-Link: https://ej2.syncfusion.com/angular/demos/#/material/treegrid/treegrid-overview/ 
  
If your requirement is not compatible with tree Grid component, then we will proceed to your reported behaviors on the Grid component. 
  
Regards, 
Ajith G.