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

Create a custom template and bind to Angular.

Thread ID:

Created:

Updated:

Platform:

Replies:

127138 Oct 28,2016 12:16 AM UTC Oct 31,2016 05:14 AM UTC JavaScript 3
loading
Tags: ejGrid
roberto
Asked On October 28, 2016 12:16 AM UTC

Hi.

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>
    </div>
</div>
<script id="editarAlmacen" type="text/x-jsrender">
    <a rel='nofollow' href ng-click="abrirModalAlmacen({{:Id}})">Editar <i class="fa fa-edit"></i></a>
</script>
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.

Regards.


Attachment: gridTemplate_3aaae8fa.zip

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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="14.3.0.49/themes/web/content/images/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" /> 
    </script> 
 
    <script> 
        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) { 
                        alert($(this).attr("alt")) 
                    }) 
                } 
            }, 
            $scope.cols = [ 
                        ..  
                { 
                    "field": "id", 
                    "headerText": "", 
                    "textAlign": "left", 
                    "template": "#columnTemplate" 
                } 
            ]; 
        }); 
    </script> 
 
 
    <div id="Grid" ej-grid e-datasource="data" e-templaterefresh="refreshTemplate" e-columns="cols" e-allowpaging="true"> 
    </div> 


Refer to the following API reference section. 


Regards, 
Seeni Sakthi Kumar S. 


roberto
Replied On 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

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

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


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

;