We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150520 Jan 9,2020 03:41 PM UTC Jan 13,2020 03:26 PM UTC Angular - EJ 2 3
loading
Tags: Grid
Sasan Moshksar
Asked On January 9, 2020 03:57 PM UTC

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 [Syncfusion]
Replied On January 10, 2020 12:44 PM UTC

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', { staticfalse }) 
  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']); 
  } 
} 

 
 
Please let us know, if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


Sasan Moshksar
Replied On January 10, 2020 02:09 PM UTC

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 [Syncfusion]
Replied On January 13, 2020 03:26 PM UTC

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 } 
     ]; 
. . . 
} 
 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon