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. Image for the cookie policy date
close icon

Create a custom template and bind to Angular.


I'm trying to do this:

Load a custom template like this.
<div id="catAlmacenes" ej-grid e-datasource="almacenes" e-allowpaging="true" e-allowsorting="true" e-allowsearching="true">
    <div e-columns>
        <div e-column e-field="Descripcion" e-headertext="Descripción" e-textalign="left" e-width="225"></div>
        <div e-column e-field="SucursalClave" e-headertext="Clave Sucursal" e-textalign="left" e-width="75"></div>
        <div e-column e-field="Sucursal" e-headertext="Sucursal" e-textalign="left" e-width="225"></div>
        <div e-column e-field="Habilitado" e-headertext="Habilitado" e-textalign="center" e-width="75"></div>
        <div e-column e-textalign="center" e-width="100" e-template="#editarAlmacen"></div>
<script id="editarAlmacen" type="text/x-jsrender">
    <a rel='nofollow' href ng-click="abrirModalAlmacen({{:Id}})">Editar <i class="fa fa-edit"></i></a>
The JS Render it's working well and rendering the :Id value to this, but is not compiled by Angular. I try to use for a button, but I don't want to use thestandar ejButton I want something like the image attached.
<a rel='nofollow' href="" ng-click="abrirModalAlmacen(1003)">Editar <i class="fa fa-edit"></i></a>
If you can help I appreciate that.


Attachment: gridTemplate_3aaae8fa.zip

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 28, 2016 01:54 PM UTC

Hi Roberto, 

We could see you would like to place an image and on clicking the image, you would like to perform some operation. This can be achieved by using the column template. Therefore, click event can be bind to them in the templateRefresh event of the Grid. Refer to the following code example and sample. 

    <script id="columnTemplate" type="text/x-jsrender"> 
     <img style="width: 75px; height: 70px" src="{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> 
        angular.module('listCtrl', ['ejangular']) 
        .controller('PhoneListCtrl', function ($scope) { 
            $scope.data = obj; 
            $scope.refreshTemplate = function (args) { 
                if (!args.data.Verified) { 
                    $(args.cell).find("img").click(function (args) { 
            $scope.cols = [ 
                    "field": "id", 
                    "headerText": "", 
                    "textAlign": "left", 
                    "template": "#columnTemplate" 
    <div id="Grid" ej-grid e-datasource="data" e-templaterefresh="refreshTemplate" e-columns="cols" e-allowpaging="true"> 

Refer to the following API reference section. 

Seeni Sakthi Kumar S. 

RO roberto October 28, 2016 02:35 PM UTC

Hi and thanks for the response.

No, it was not an image. I want to render an anchor <a> element instead of a button and bind the click event to an angullar scope function.
I can do it and post the solution for everybody to want to know about it. If you add the template online, (I don't know whom do it either Ang or EJ) the template it's processed as angular syntax.

<div e-column e-textalign="center" e-width="100" e-template='<button class="btn btn-sm btn-link" ng-click="$parent.abrirModalAlmacen()"> Editar {{data.Id}} {{data.Descripcion}}</button>'></div>
The fields can be accesed using the object data.* as you can see. But because it's created in a repetition loop a new scope it's being used for each element. Then in order for access the function in the desired scope you need to call the parent's scope that's why I used it.
It' working now. Thanks

RU Ragavee U S Syncfusion Team October 31, 2016 05:14 AM UTC

Hi Roberto, 
Thanks for your update. 
We are happy that your requirement is achieved. 
Ragavee U S. 

Live Chat Icon For mobile
Up arrow icon