Articles in this section
Category / Section

How to render TreeGrid using Angular Template

1 min read

We can render the row template using Angular JS template in TreeGrid. For Angular JS we need to use the template type as "text/ng-template". The templates inside the ej-controls will create a new child scope, so to call the parent scope function, we need to use the “$parent” property in the template. The below code example explains how to bind the click event to a button using angular template.

<body ng-controller="TreeGridCtrl">    
<div id="treegridangularrowtemplate" ej-treegrid e-datasource="data" e-rowtemplateid="rowTemplateID">
</div>         
<script type="text/ng-template" id="rowTemplate">
        <tr>
            <td class="border" style='height:99px;'>
                <div>{{data.EmployeeID}}</div>
            </td>
            <td class="border" style='height:99px;'>
                <div style="font-size:14px;">
                    {{data.Name}}
                    <p style="font-size:9px;">{{data.Designation}}</p>
                    <button ng-click="$parent.row()">Row Button</button>
                </div>
            </td>
            <td class="border" style='height:99px;'>
                <div style="display:inline-block;">
                    <div style="padding:5px;">{{data.FullName}}</div>
                    <div style="padding:5px;">{{data.Address}}</div>
                    <div style="padding:5px;">{{data.Country}}</div>
                    <div style="padding:5px;font-size:12px;">{{data.Contact}}</div>
                </div>
            </td>
            <td class="border" style='height:99px;'>
                <div>{{data.DOB}}</div>
            </td>
        </tr>
    </script>
angular.module('listCtrl', ['ejangular'])
        .controller('TreeGridCtrl', function ($scope) {
                   //
            $scope.rowTemplateID = "rowTemplate";
            $scope.altRowTemplateID = "altRowTemplate";            
            $scope.row = function () {
                alert("Row Template")
            }
        });

 

C:\Users\Jonesherine.Stephen\Desktop\angjs.PNG

 

A sample to render the TreeGrid using Angular template is available in the following link, Sample

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied