load data of the detail template when user clicked on the specific collapse

[Sasan Moshksar]

Hi,

I have Grid component with the detail template.

Inside of each detail template, I've added Tabs and each Tab content another Grid, like the picture and sample zip code.

Here is my question:

I want to load relevant data of the tab (header text and its content) when user clicked on specific expand/collapse icon. In this case I need to send employeId to this events as well.

Please let me know, how can I do it? 

Attachment: sampledatagrid_49d1ed01.zip

[Prasanna Kumar Viswanathan]

Hi Sasan, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement by using load event of the child Grid and created event of the Tab. 

In the below code example we are creating unique ID for each child Grid inside the tab using id property to access the Grids dynamically. Based on the unique ID , we are updating the data for child Grids dynamically. Also we have changed the header text of each tabs dynamically in the created event of the tab. In the load event of the childGrid we can make a service call based on the employeeID and update the dataSource in the success event of the service or we can create a query. 

 

Please find the below code example and sample for more information. 

 

Html 

<div class="control-section"> 

  <ejs-grid #grid [dataSource]='data' id='Grid'> 

    <ng-template #detailTemplate let-data> 

// we can pass the parentRowdata along with employeeid here 

      <ejs-tab id="element" (created)="tabCreated(data)"> 

        <e-tabitems> 

// to change header dynamically 

          <e-tabitem [header]='headerText[0]'> 

            <ng-template #content> 

              <ejs-grid #tabGrid1 [id]="tab1grid(data)" (load)="gridload(data)" height='350' [allowRowDragAndDrop]='true' 

                [selectionSettings]='selectOptions' height='400'> 

                 . . .             </ejs-grid> 

            </ng-template> 

          </e-tabitem> 

          <e-tabitem [header]='headerText[1]'> 

            <ng-template #content> 

              <ejs-grid [dataSource]='dataGrid2'  height='350' [allowRowDragAndDrop]='true' 

                [selectionSettings]='selectOptions' height='400'> 

                <e-columns> 

. . . 

              </ejs-grid> 

            </ng-template> 

          </e-tabitem> 

          <e-tabitem [header]='headerText[2]'> 

 

  </ejs-grid> 

 

</div> 

TS 

 

. . . 

export class AppComponent implements OnInit { 

  public data: any; 

 

  @ViewChild('grid', { static: false }) 

  public grid: GridComponent; 

  public headerText: Object = [{ 'text': 'Tab1' }, { 'text': 'Tab2' },{ 'text': 'Tab3' }]; 

  public dataGrid2: Object[] = []; 

  public selectOptions: Object; 

   

  constructor() { 

    this.data = employeeData; 

  } 

 

  ngOnInit() { 

    this.dataGrid2 = orderDetails; 

    this.selectOptions = { type: 'Multiple' };  

  } 

 

  tabCreated (args) { 

// dynamically updating the tab header 

    this.headerText[0].text = 'Tab -'+ args['EmployeeID']; 

    this.headerText[1].text = 'SecondTab -'+ args['EmployeeID']; 

    this.headerText[2].text = 'ThirdTab -'+ args['EmployeeID']; 

  } 

 

  tab1grid (args) { 

    return 'tab1Grid' + args['EmployeeID']; 

  } 

 

  gridload (data) { 

// here you can call the service and load the data for Grid 

    let grid = (document.getElementById('tab1Grid'+data['EmployeeID']) as any).ej2_instances[0]; 

   grid.dataSource = orderDatas; 

   grid.query = new Query().where('EmployeeID', 'equal', data['EmployeeID']); 

  } 

} 

 

Sample: https://stackblitz.com/edit/angular-150520-dynamic-data-rzksvx?file=app.component.ts 

 

Please let us know, if you need further assistance. 

 

Regards, 

Prasanna Kumar N.S.V 

[Sasan Moshksar]

Hi Prasanna,

thanks for your help!

I defined specific fields for first grid (#grid, id='Grid' )

• EmployeeID
  
• FirstName
  
• Title
  
• Hire Date
  
• Reports To

here is my question:

• Why does first grid(parent) shows all fields of datasource?
• How can I invisible field EmployeeID? it seems [visible]="false" does not work

Thanks!

[Prasanna Kumar Viswanathan]

Hi Sasan, 

 

Query: Why does first grid(parent) shows all fields of datasource? & How can I invisible field EmployeeID? it seems [visible]="false"  does not work. 

 

Since we are defining the child Grid columns inside the parent Grid tag the parent grid columns are overridden and parent grid columns becomes auto generated. We suggest you to define the parentGrid column In typescript to overcome the reported behavior. You can hide the EmployeeID field in typescript. Please refer the below code example and sample for more information. 

 

<div class="control-section"> 

  <ejs-grid #grid [dataSource]='data' [columns]="parentColumns" id='Grid'> 

     <ng-template #detailTemplate let-data> 

 

        </ng-template> 

  </ejs-grid> 

</div> 

  

. . . 

  ngOnInit() { 

     this.data = employeeData; 

     this.parentColumns= [ 

          { field: 'EmployeeID',visible: false, headerText: 'Employee ID', textAlign: 'Right', width: 125 }, 

            { field: 'FirstName', headerText: 'Name', width: 125 }, 

            { field: 'Title', headerText: 'Title', width: 180 }, 

            { field: 'City', headerText: 'City', width: 110 }, 

            { field: 'Country', headerText: 'Country', width: 110 } 

     ]; 

. . . 

} 

 

 

Sample: https://stackblitz.com/edit/angular-150520-dynamic-data-3ipzkm?file=app.component.html 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Prasanna Kumar N.S.V