Create a custom template and bind to Angular.

[roberto]

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]

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> 

https://jsplayground.syncfusion.com/ungrudwb 

Refer to the following API reference section. 

https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh 

Regards, 

Seeni Sakthi Kumar S. 

[roberto]

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]

Hi Roberto, 

  

Thanks for your update. 

 

We are happy that your requirement is achieved. 

  

Regards, 

Ragavee U S.