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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Call custom method from grid column template

Thread ID:

Created:

Updated:

Platform:

Replies:

131555 Jul 14,2017 01:38 PM UTC Jul 24,2017 04:50 AM UTC Angular 7
loading
Tags: ejGrid
Milos
Asked On July 14, 2017 01:38 PM UTC

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 [Syncfusion]
Replied On July 17, 2017 12:31 PM UTC

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. 
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
Replied On July 18, 2017 11:02 AM UTC

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 [Syncfusion]
Replied On July 19, 2017 10:06 AM UTC

Hi Milos, 

We have checked and prepared a sample based on your query that can be downloaded from the below link. 
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
Replied On July 19, 2017 01:04 PM UTC

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 [Syncfusion]
Replied On July 20, 2017 12:29 PM UTC

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. 

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
Replied On July 21, 2017 01:25 PM UTC

Hi Mani,

Thank you a lot, that was all i need. 

Regards,

Milos


Mani Sankar Durai [Syncfusion]
Replied On July 24, 2017 04:50 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;