Custom column with ng-content

[Gonzalo]

Hi,

I have a component with ejs-grid and I want to use this like a generic component to show tables. I define some columns throught an array, and I add one custom column to select rows with checkbox, and another custom row for show custom button actions.

It is possible to use ng-content in a column? I want to define the buttons actions in the component that uses the table component.

For example, this is the template of a component that uses the generic table component:
...

<table-component>

  <ng-container slot="actions"> <button>Editar</button> </ng-container>

</table-component>

...

The table-component template:

<ng-container *ngIf="data$ | async as tableData">

  <ejs-grid  #table [dataSource]="tableData.data" [columns]="tableData.columns">

<e-columns>

      <e-column type='checkbox' width='50' [showInColumnChooser]='false'></e-column>

      <e-column *ngFor="let column of tableData.columns"

        [field]='column.field' [headerText]='column.headerText'

        [customAttributes]="{'data-column-name': column.headerText}">

      </e-column>

      <e-column headerText='Acciones'>

        <ng-template #template let-data>

          <ng-content select="[slot='actions']"></ng-content>

        </ng-template>

      </e-column>

    </e-columns>

  </ejs-grid>

</ng-container>

This implementation show the table with data, the first column with checkbox to select each row, the columns defined in tableData.columns and the last column. But on the last column, the button that I set in the component only show on the last row of the table.

How can I get to show the buttons in all the rows?

Thanks for your help.

[Praveenkumar Gajendiran]

Hi Gonzalo,

Greetings from Syncfusion support.

By default in Angular, ng-content does not work with ng-container. This is default issue in angular, Please refer the below link for this,

Reference Link-  https://github.com/angular/components/issues/8258
                              http://plnkr.co/edit/NqAbVgUclJkOSQCrS97H?p=preview&preview

We infer that you want to render the customized button in the Grid column. Already we have a inbuilt support to render the custom button in the Grid column through the Command Column feature. 

Please refer the below documentation link for the command columns feature of the Grid, 

Inbuild Support Command Column - https://ej2.syncfusion.com/angular/documentation/grid/edit/#command-column 

Custom Button Command Column- https://ej2.syncfusion.com/angular/documentation/grid/edit/#custom-command



Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[Gonzalo]

Hi Praveenkumar,

Thank you for your answer. The problem is that with ng-content the content only show once, althougt it's inside a loop. I did not know that.

The solution could be to use ng-template. 

For example in any component that wants to use the table component:

<table-component>

  <ng-template #actions> <button>Editar</button> </ng-template>

</table-component>

The table component:

@ContentChild('actions',{static: false}) actionsTemplate: TemplateRef<any>;

The table component template:

<ng-container *ngIf="data$ | async as tableData">

  <ejs-grid  #table [dataSource]="tableData.data" [columns]="tableData.columns">

<e-columns>

       <e-column type='checkbox' width='50' [showInColumnChooser]='false'></e-column>

       <e-column *ngFor="let column of tableData.columns"

         [field]='column.field' [headerText]='column.headerText'

         [customAttributes]="{'data-column-name': column.headerText}">

       </e-column>

       <e-column headerText='Acciones'>

         <ng-container *ngIf="actionsTemplate"  [ngTemplateOutlet]="actionsTemplate"> </ng-container>

       </e-column>

     </e-columns>

  </ejs-grid>

</ng-container>

This works well. However I'm thinking in another approach, maybe to have the action buttons implemented on the table component and with inputs properties activate or deactivate those buttons.

Thank you for putting me on the correct way.

[Praveenkumar Gajendiran]

Hi Gonzalo, 

You are welcome. We are glad that you have resolved the reported problem at your end. 

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G