Grid how to ng-container a complete e-column

[Cesar Smerling]

Hello! I'm trying to extend my component that contains an ej-grid, I want to expose one column with ng-container so that can be defined in the parent that contains my component.

I tried to add ng-container with the ngTemplateOutlet inside the e-columns but the column is not shown.

Cannot share all the code because policy but I hope that this could help understand what I want to do.

Could be that the container cannot access e-columns tag?

Thanks.

Parent HTML component:

<scs-baseline-property-editor [rows]="propertyRows$ | async">
    <ng-template scsPathPropertyColumn>
        <e-column [field]="columns.PATH" [headerText]="''" [allowFiltering]="isComponentEditor"
                  [allowSorting]="false">
            <ng-template #headerTemplate let-data>
                <div class="pt-1">
                    <scs-baseline-type-filter-buttons [initialCheck]="'node'"
                                                      (onClick)="handleTypeClick($event)">

                    </scs-baseline-type-filter-buttons>
                </div>
            </ng-template>
            <ng-template #template let-row>
                <scs-path-column-display [row]="row" [isComponentEditor]="false"></scs-path-column-display>
            </ng-template>
        </e-column>
    </ng-template>

</scs-baseline-property-editor>

Child Component (GRID)

export class BaselinePropertyEditorComponent implements OnInit, OnChanges {
    @ContentChild('pathTemplate', {static: true}) pathTemplateRef: TemplateRef<any>;

Child Html 

<e-columns>
    <e-column [field]="columns.ID" [visible]="false" [isPrimaryKey]="true"></e-column>

    <e-column [field]="columns.TYPE" [visible]="false"></e-column>


        <ng-container [ngTemplateOutlet]="pathTemplateRef">

        </ng-container>

Directive

@Directive({
  selector: '[scsPathPropertyColumn]'
})
export class PathPropertyColumnDirective {

  constructor(templateRef: TemplateRef<any>, propertyGrid: BaselinePropertyEditorComponent) {
      console.log("Directive", templateRef, propertyGrid);
      propertyGrid.pathTemplateRef = templateRef;

  }

}

[Thiyagu Subramani]

Hi Cesar, 

Thanks for contacting Syncfusion support. 

Based on your shared information we suspect that your requirement is container cannot access e-columns tag. But before proceed this, share below details then only we provide appropriate solution as soon as possible. 

1.  Share the Complete Grid rendering code. 

2. In your update you have mentioned that you are trying to extend my component that contains an ej-grid. So please confirm are you using EJ1 grid or EJ2 Grid? 

3. Syncfusion package version. 

4. Which you want to show in this container template? 

5. Share video or pictorial representation of your requirement. 

For reference please refer to the below sample. 

Sample link: https://stackblitz.com/edit/angular-ninkrn-vdph5g?file=default.html 

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

Regards, 

Thiyagu S.