Call custom method from grid column template

[Milos]

I am using Angular 4 and syncfusion control.

I have a problem to call my custom method on '<a>' element click and to send 'userId' as a method parameter. 'userId' is in DataSource. Code example:

    <script type="text/x-jsrender" id="userTemplateId">

        <a target="_blank" rel='nofollow' href=''  onclick="myFunction({{:userId}})" >{{:userName}}</a>

    </script>

Where 'myFunction' is Angular 4 method in component or can be somewhere else.

Is it possible ?

[Mani Sankar Durai]

Hi Milos, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you would like to get the field value in click event when clicking the anchor tag. Based on your requirement we have prepared a sample that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/131555/ze/sample476162849 

Refer the code example 

[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 

 

    } 

Note: When clicking the particular template column corresponding row value will be passed on click event. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai 

[Milos]

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

[Mani Sankar Durai]

Hi Milos, 

We have checked and prepared a sample based on your query that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/131555/ze/angular2-seeds-systemjs2108164582 

In this sample as per your requirement we have rendered the template in index.html and defined the columns in component.ts file. When clicking the element of template column we have triggered an event by passing the corresponding parameter value. 

Refer the code example 

[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' }, 

 

    ] 

                           ... 

 

Please let us know if you need further assistance 

Regards, 

Manisankar Durai. 

[Milos]

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

[Mani Sankar Durai]

Hi Milos, 

Sorry for the inconvenience caused. 

Based on your query we have prepared a sample with web pack that can be downloaded from the below link. 

Link: http://www.syncfusion.com/downloads/support/forum/131555/ze/Webpack_sample923453252 

Here we have rendered the column template from index.html page using text/x-jsrender and bind the click event for the particular event.  

Refer the code example 

[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> 

Please let us know if you need further assistance 

Regards, 

Manisankar Durai. 

[Milos]

Hi Mani,

Thank you a lot, that was all i need. 

Regards,

Milos

[Mani Sankar Durai]

Hi Milos,              

We are happy to hear that your problems has been solved. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.