How to add angularJs in Syncfusion grid or make the syncfusion rows clickable and run angularjs functions

I am using angularJs and Syncfusion to show the data in a table. So, for that purpose I am using Syncfusion grid (https://help.syncfusion.com/angularjs/grid/overview).

But I am not able to use the angularjs functions in this grid:

<div class="table-responsive grid-toggle">

                <div id="GridId" ej-grid e-datasource="TableData"
                     e-allowfiltering="true" e-allowpaging="true" e-allowsorting="true" e-enabletouch="false" e-responsive="true"
                     e-allowselection="true" e-filtersettings-filterType="excel" e-allowtextwrap="true" e-recorddoubleclick="Get">
                    <div e-columns>
                        <div e-column e-field="Id" e-headertext="{{TableData.Id}}" e-width="2" ng-click="func()"></div>
                        <div e-column e-field="Nums" e-headertext="Nums" e-width="1"></div>
                        <div e-column e-field="Fams" e-headertext="Fams" e-width="2"></div>
                    </div>
                </div>
</div>

So in this code above - The very first column e-headertext is not working and neither the ng-click.

Can someone help me with this challenge. I just want to make the table dynamic and add clickable rows in the grid. I want to stick to syncfusion because of the filter excel setting.

Thanks in advance.

Solution

Thanks for contacting Syncfusion Support.

Query 1: e-headertext is not working

We have modified your code and achieved your requirement by setting headerText from the scope variable.

Please check the below code snippet and sample,


<div id="Grid" ej-grid e-datasource="data" e-allowpaging="true" e-allowfiltering="true"
e-filtersettings="filterType" >
          <div e-columns>
             <div e-column e-field="OrderID"></div>
             <div e-column e-field="CustomerID" e-headertext="headerText"></div>
             <div e-column e-field="ShipCity"></div>
          </div>
     </div>
    <script>
        angular.module('listCtrl', ['ejangular'])
            .controller('PhoneListCtrl', function ($scope,$rootScope) {
              $scope.data = window.gridData;
              $scope.headerText = "test header";
            });
   
  </script>

Sample: http://jsplayground.syncfusion.com/d4nfnple

Query 2: add clickable rows in the grid

We suggest you to use the rowSelected event of grid for making row clickable and perform action based on click. Also you can enable CellSelection and use cellSelected event. Please check the below API and help documentations,
Row Selection: https://help.syncfusion.com/angularjs/grid/selection#row-selection
Cell Selection: https://help.syncfusion.com/angularjs/grid/selection#cell-selection
CellSeleced Event: https://help.syncfusion.com/api/js/ejgrid#events:cellselected
RowSelected Event: https://help.syncfusion.com/api/js/ejgrid#events:rowselected

Kindly get back to us for further assistance.

Regards,
Padmavathy Kamalanathan