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.
Unfortunately, activation email could not send to your email. Please try again.

Create a custom template and bind to Angular.

Thread ID:





127138 Oct 27,2016 08:16 PM Oct 31,2016 01:14 AM JavaScript 3
Tags: ejGrid
Asked On October 27, 2016 08:16 PM


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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 28, 2016 09:54 AM

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. 

Replied On October 28, 2016 10:35 AM

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

Ragavee U S [Syncfusion]
Replied On October 31, 2016 01:14 AM

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


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.

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.