Send the template to the enclosed grid column

Question

Send the template to the enclosed grid column

I enclosed a kendo-grid-column within a new component by using

<imx-gridColumn field="Count" title="Count">
...
</imx-gridColumn>

The component that includes the imx-gridColumn is templated with

<kendo-grid-column #column field="{{field}}">
...
</kendo-grid-column>

Everything seems to be working smoothly. Now I want to do something like

<imx-gridColumn field="Message" title="A longer message">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button (click)="ShowMessage(dataItem)">Show my message</button>
    </ng-template>
</imx-gridColumn>

in order to apply a template specifically to this column. Other columns should use the standard template provided by the kendo-grid-column.

Is there a straightforward way to pass the ng-template to the kendo-grid-column? If not, how can I modify the content of the column so that the button is used instead of plain text?

Edit
After some investigation, I managed to extract the template using

@ContentChild(TemplateRef) Template:TemplateRef<ElementRef>

, which at least contains some data. But now I'm struggling with pushing this template to my kendo-grid-column.

angular typescript angular2-template kendo-ui-angular2

Answer 1

Answer №1

At long last, I have found the solution to this challenging issue and feel compelled to share it with others who may find themselves in a similar predicament.
I will only be disclosing the essential parts of the solution, not the complete files.

GridColumn.component.ts

@Component({
    selector: 'imx-gridColumn',
    templateUrl: './GridColumn.component.html',
})

export class imx_GridColumnComponent
{
  ...
  @ContentChild('kendoGridCellTemplate') Template:TemplateRef<ElementRef>;
}

GridColumn.component.html

<kendo-grid-column field="{{field}}">
   ...
    <ng-template *ngIf="Template" kendoGridCellTemplate let-dataItem>
         <ng-container [ngTemplateOutlet]="Template" [ngTemplateOutletContext]="{$implicit:dataItem}"></ng-container>
    </ng-template>
</kendo-grid-column>

Once done, you can easily pass the template to the grid column using the following method:

<imx-gridColumn field="Message" title="A longer message">
    <ng-template #kendoGridCellTemplate let-dataItem>
        <button (click)="ShowMessage(dataItem)">Show my message</button>
    </ng-template>
</imx-gridColumn>

Please note that if you wish to provide multiple templates, you must assign an identifier to ensure the correct template is applied. I opted to use the same naming convention as Kendo for their directives, simply adding a "#" prefix, but you are free to choose any name you prefer.

Answer 2

At long last, I have found the solution to this challenging issue and feel compelled to share it with others who may find themselves in a similar predicament.
I will only be disclosing the essential parts of the solution, not the complete files.

GridColumn.component.ts

@Component({
    selector: 'imx-gridColumn',
    templateUrl: './GridColumn.component.html',
})

export class imx_GridColumnComponent
{
  ...
  @ContentChild('kendoGridCellTemplate') Template:TemplateRef<ElementRef>;
}

GridColumn.component.html

<kendo-grid-column field="{{field}}">
   ...
    <ng-template *ngIf="Template" kendoGridCellTemplate let-dataItem>
         <ng-container [ngTemplateOutlet]="Template" [ngTemplateOutletContext]="{$implicit:dataItem}"></ng-container>
    </ng-template>
</kendo-grid-column>

Once done, you can easily pass the template to the grid column using the following method:

<imx-gridColumn field="Message" title="A longer message">
    <ng-template #kendoGridCellTemplate let-dataItem>
        <button (click)="ShowMessage(dataItem)">Show my message</button>
    </ng-template>
</imx-gridColumn>

Please note that if you wish to provide multiple templates, you must assign an identifier to ensure the correct template is applied. I opted to use the same naming convention as Kendo for their directives, simply adding a "#" prefix, but you are free to choose any name you prefer.

Send the template to the enclosed grid column

Answer №1

Similar questions

Vue's computed property utilizing typed variables

How can I prevent the installation of my Ionic 2 application on devices that have been rooted or jailbroken?

Adding custom TypeScript classes to an Electron project is a straightforward process that allows developers to enhance their

What specific type of useRef should I use to reference a callback function?

Guidelines for automatically exporting (and downloading) a Highcharts chart created in Angular

Is it possible to import a module that was exported in Node.js using the SystemJS import method?

Mastering the Art of Sharing PrimgNg Selected Checkboxes with Child Component Dropdown

Typescript: Ways to fix the error 'rxjs/Rx does not have any exported member 'SubscriptionLike'

I am interested in creating a versatile validation system that can be applied to any Angular form. The standard reactive approach is already completed and functioning effectively

Defining a structure for an entity in which its attributes distinguish between different data types and an array combination

Learn the ins and outs of utilizing *ngIf in index.html within Angular 8

Changing the default font size has no effect on ChartJS

Storing a child in an existing object with Firebase and Angular 6

Is it feasible to arrange tables in ng-bootstrap Sortable Tables by default column selection?

What is the best way to access data in a node.js application from IONIC typescript via a REST API?

Implement a universal Custom Validator to be applied to all FormControls across the entire application

Strategies for modifying the title attribute within an <a> tag upon Angular click event

Change the type of an object to a different type

What could be causing the profile detail to be missing in the home component?

The getStaticProps() method in NextJS does not get invoked when there is a change in