Parent/Child toolbar Customization

Question

I have Parent/Child grids. in the Child grid I want to give user the ability to choose Year Selection, as My child grid has quite a few Years/Months in them. Unfortunately below code is working fine in Parent but not in child grid.

If I add to Parent with template in it. It is working as expected but not for child grid

this.parenttoolbarOptions=['Add', 'Edit', 'Delete', 'Search','Update', 'Cancel','ExcelExport',{ text: 'Expand', tooltipText: 'Expand', 
prefixIcon: 'e-expand', id: 'show' },{ text: 'Collapse', tooltipText: 'Collapse', prefixIcon: 'e-collapse', id: 'hide'}];


this.childtoolbarOptions=['Add','Edit', 'Delete', 'Update', 'Cancel','ExcelExport','ColumnChooser',
{ text: 'Show', tooltipText: 'Show', prefixIcon: 'e-expand', id: 'show' },
{ text: 'Hide', tooltipText: 'Hide', prefixIcon: 'e-collapse', id: 'hide' },
{template: this.templateYears}];   

What a

<ng-template #templateYears> 
  <ejs-dropdownlist id='drpChildYears' #drpChildYears [dataSource]='dsChildYears' [placeholder]='placeholder' ></ejs-dropdownlist> 
</ng-template> 

Pavithra Subramaniyam · Answer

Hi PDev, 

Thanks for contacting Syncfusion support 

You can achieve your requirement by using the “detailDataBound” event of Grid component which will be triggered when the Child Grid are initialized for the first time. Inside this event you can render the Dropdown list inside the toolbar template as given below. 





 
ngOnInit(): void { 
 
  this.childGrid = { 
    dataSource: orderDatas, 
    queryString: 'EmployeeID', 
    toolbar: [.  .  . 
      { 
        template: '<input>', 
      }, 
    ], 
    .  .  . 
  }; 
} 
detailDataBound(e) { 
  // setting id for the toolbar input element 
  e.childGrid.toolbarModule.element.querySelector('input').id = 
    e.childGrid.element.id + 'ddl'; 
  // rendering the Dropdownlist component 
  let ddl = new DropDownList({ 
    dataSource: this.sportsData, 
    width: 120, 
    select: (e) => { 
      alert(e.itemData.value); 
    }, 
    index: 2, 
  }); 
  ddl.appendTo(e.childGrid.toolbarModule.element.querySelector('input')); 
} 


Documentation : https://ej2.syncfusion.com/documentation/api/grid/#detaildatabound 
                               https://ej2.syncfusion.com/documentation/drop-down-list/getting-started/ 

Sample               : https://stackblitz.com/edit/angular-yghjfa?file=app.component.ts 

Please get back to us if you need further assistance on this. 

Regards, 
Pavithra S