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.
|
[grid.component.html]
<ej-grid [allowPaging]="true" [editSettings]="editsettings" [pageSettings.pageSize]="pagesize" [dataSource]="gridData">
<e-columns>
<e-column field="EmployeeID" [isPrimaryKey]="true" headerText="Employee ID" width="90" textAlign="right"></e-column>
<e-column field="LastName" headerText="Last Name" width="90"></e-column>
<e-column field="Country" headerText="Country" width="90"></e-column>
<e-column headerText="Template 1" width="110" [template]="true">
<ng-template e-template let-data>
<div class="test1"><a class="newanchor" [text]="data.FirstName" (click)="myFunction(data.EmployeeID)"></a></div>
</ng-template>
</e-column>
</e-columns>
</ej-grid>
[grid.component.ts]
export class GridComponent {
public gridData: any;
public pagesize: number;
editsettings: any;
template: any;
myFunction(event: any) {
alert("event clicked and the parameter value is" + event); //event contains the value for the corresponding field
} |
Hi Mani,
Thank you for your swift response.
I am using a bit different grid columns definition.
Example from my component.ts
columns: any = [
{ template: true, templateID: "#userTemplateId", headerText: 'User Id' },
{ field: "name", headerText: 'User Name' },
{ field: "phone", headerText: 'User Phone' },
]
My component.html:
<ej-grid id="usersGridId"
[columns]="columns"
[dataSource]="gridData"
[toolbarSettings]="toolbarSettings">
</ej-grid>
My index.html where is template:
<script type="text/x-jsrender" id="userTemplateId">
<a target="_blank" rel='nofollow' href='' onclick="myFunction({{:userId}})" >{{:userName}}</a>
</script>
Is it possible to make it to work in this way. For example to put template (ng-template) in my component.html and to reference to template by id from columns object.
Or some other way to fit this implementation. I just want to avoid column implementation in component.html.
Regards,
Milos
|
[Index.html]
<script type="text/template" id="userTemplateId">
<a class="newanchor" onclick="myFunction({{:EmployeeID}})"> click here</a>
</script>
<script>
function myFunction(e) {
alert("event clicked and the parameter value is" + e); //event contains the value for the corresponding field
}
</script>
[grid.component.html]
<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData" id="grid" [columns]="columns">
</ej-grid>
[grid.component.ts]
...
columns: any = [
{ template: true, templateID: "#userTemplateId", headerText: 'User Id' },
{ field: "OrderID", headerText: 'User ID' },
{ field: "CustomerID", headerText: 'User Name' },
]
...
|
Hi Mani,
Your example work for me, but when I used the same code in my application does not work.
Your example is with systemJS, I am using web pack, maybe that can caused the problem.
My template is not rendered properly. Since you change template script type from "text/x-jsrender" to "text/template", placeholders {{:EmployeeID}} are not rendered at all, stay like this ?
Do I need some additional library for this ?
Regards,
Milos
|
[Index.html]
<script type="text/x-jsrender" id="userTemplateId">
<a class="newanchor" onclick="myFunction({{:EmployeeID}})"> click here</a>
</script>
<script>
function myFunction(e) {
alert("event clicked and the parameter value is" + e); //event contains the value for the corresponding field
}
</script> |
Hi Mani,
Thank you a lot, that was all i need.
Regards,
Milos
