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 Oct 7,2020 11:55 AM UTC Angular - EJ 2 7
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 


Chirag
Replied On October 6, 2020 09:29 AM UTC

Hi Team,

I tried below sample but it is not working for me.


I want to implement button column with button action in child grid.

I have attached my .ts and .html files in zip

Attachment: managepreference.component_a97be7e1.zip

Sujith Kumar Rajkumar [Syncfusion]
Replied On October 7, 2020 11:55 AM UTC

Hi Chirag, 
 
Based on your reported problem we suspect you are using latest angular package. In the latest angular packages(after Angular 9), there have been changes related to the angular’s ViewContainerRef property(used here for accessing the template in TS  file) which currently is not allowing to access the template content. More details on this can be checked in the below link where alternate approaches are suggested, 
 
 
So you can resolve this problem using any of the approach suggested in the above link or set the ‘static’ property as ‘false’ while using the ViewChild to access the template instance. This is demonstrated in the below code snippet, 
 
export class AppComponent implements OnInit, AfterViewInit { 
    @ViewChild('childTemplate', { static: true }) 
    public template: TemplateRef<{}>; 
    public childGrid: any; 
 
     constructor(@Inject(ViewContainerRef) private viewContainerRef?: ViewContainerRef) { 
 
    } 
 
    ngAfterViewInit() { 
        this.template.elementRef.nativeElement._viewContainerRef = this.viewContainerRef; 
        this.template.elementRef.nativeElement.propName = 'template'; 
    } 
 
    ngOnInit(): void { 
        this.childGrid = { 
                    . 
                    . 
            columns: [ 
                { headerText: 'Customer ID', template: this.template, width: 150 }, 
                                  . 
                                  . 
            ], 
        }; 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


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