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

Template in child grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142305 Jan 26,2019 04:37 PM UTC Feb 18,2020 08:56 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Atlante Dev Team
Asked On January 26, 2019 04:37 PM UTC

Hi, 

I would like to use a template for a column in a child grid (hierarchical grid). 

As I need to define the childGrid in code, I tried something like that for the column : 

{ headerText: 'Module', template: '<ng-template #template let-data>{{data.myRowProperty}}</ng-template>' },

but it displays the {{data.myRowProperty}} like a string in the grid. I tried ${data.myRowProperty} but it's not working neither (syntax found in the template-engine documentation).  

How can I define the template like I tried to do ? 

After that, I will actually call a function from the template (not only show data.myRowProperty), and pass data.myRowProperty as a parameter, should I know something ? 

Thank you very much. Your components are really good and only the tricky things need explanations. 

Pavithra Subramaniyam [Syncfusion]
Replied On January 28, 2019 06:41 AM UTC

Hi Atlante, 
 
Greetings from Syncfusion. 
 
Query: I would like to use a template for a column in a child grid (hierarchical grid).  
 
We have analyzed your query but currently, we do not have support to use ng-template in the child grid. We have already logged ‘template support for child grid’ as a feature and it will be available in any of our upcoming patch releases. So we suggest to use the below way to use template property in the child grid until then, 
 
Code Example:  
 
[.ts] 
... 
this.childGrid = { 
            dataSource: orderDatas, 
            queryString: 'EmployeeID', 
            allowPaging: true, 
            pageSettings: {pageSize: 6, pageCount: 5}, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
                { headerText: 'Ship Country', template: '<div>${ShipCountry}</div>', width: 120 }, 
                { field: 'Freight', headerText: 'Freight', width: 120 }, 
                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
            ] 
        }; 
... 
 
 
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


Thijs
Replied On November 1, 2019 04:20 PM UTC

Regarding this issue, is there allready support for ng-template in a childgrid? the solution given is not working for me because I want to use an ejs-checkbox inside the template. something like:

this.childGrid = {
      queryString: 'appointmentId',
      columns: [
          { field: 'childid', headerText: 'childid'},
          { field: 'confirm', headerText: 'Confirm', template: '{ejs-checkbox #checkbox [checked]="data.confirmed" (change)="checkboxChange($event)"}{/ejs-checkbox}'},
      ]
    };



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 5, 2019 12:58 PM UTC

Hi Thijs, 

Thanks for contacting us. 

We do not have support for ng-template in childgrid. Since childGrid will render as a type-script component, it is not feasible to use ng-templates in childgrid. However you can use templates and other components in childGrid like our previous update or the below documentations. 

Documentation link: 

To display html elements: 

To render other components 

Regards, 
Seeni Sakthi Kumar S 


James
Replied On February 17, 2020 11:58 PM UTC

Can you advise when support for ng-template in child grid will be released?

In your post below it was stated " We have already logged ‘template support for child grid’ as a feature and it will be available in any of our upcoming patch releases. "

Dhivya Rajendran [Syncfusion]
Replied On February 18, 2020 08:56 AM UTC

Hi James, 

Greeting from Syncfusion support. 

Currently there is no definite time line to include this in to our source, However, in the mean time you can achieve your requirement by using the below way. Please refer the below code example and documentation for more information. 

 
@Component({ 
  selector: 'app-root', 
  template: `<ejs-grid #grid [dataSource]='pData' height='315px' [childGrid]='childGrid'> 
                  <e-columns> 
                      . . . . 
                    <e-column field='City' headerText='City' width=150></e-column> 
                  </e-columns> 
              </ejs-grid> 
              <ng-template #childtemplate let-data> 
                  <div class="image"> 
                          <img src="{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}"/> 
                   </div> 
              </ng-template> 
              `, 
  providers: [DetailRowService] 
}) 
export class AppComponent implements OnInit, AfterViewInit { 
 
  constructor(@Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef) { 
 
  } 
  public pData: object[]; 
  @ViewChild('childtemplate') public childtemplate: any; 
  @ViewChild('grid') public grid: GridComponent; 
  public childGrid: any; 
 
  ngAfterViewInit() { 
      this.childtemplate.elementRef.nativeElement._viewContainerRef = this.viewContainerRef; 
      this.childtemplate.elementRef.nativeElement.propName = 'template'; 
  } 
 
  ngOnInit(): void { 
      this.pData = employeeData; 
      this.childGrid = { 
          dataSource: data, 
          queryString: 'EmployeeID', 
          load() { 
              this.registeredTemplate = {};   // set registertemplate value as empty in load event 
          }, 
          columns: [ 
              { headerText: 'Employee Image’, template: this.childtemplate}, 
              { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
          ], 
      }; 
  } 
} 



Please get back to us if you need further assistance on this. 

Regards, 
R.Dhivya 


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