ejGrid with angularjs template doesn't compile

[Jemmy Lu]

I'm using ejGrid angularjs with ng-template but the content inside ng-template not render to angularjs and still with something like "{{1+1}}"

Following is the code:

$scope.cols = [

                //....other fields

                { headerText: "", template: true, templateID: "#myTemplate" }

    ];

<script type="text/ng-template" id="myTemplate">

    <div>

     {{1+1}}                                

    </div>

</script>

but it render as the following in browser :

<div ej-template="" ej-prop="0" class="tmpl2296c6b5-de0c-4098-ad67-0a1c2805cd13 ej-angular-template">

     <div>

        {{1+1}}                                

    </div>

</div>

I see the example Here and it has one more attribute "ng-scope" after rendering:

<div ej-template="" ej-prop="2" class="tmpl10c8fcec-a1ef-48e2-a5a3-e9e44c2bb200 ej-angular-template ng-scope">         

        <span id="exportIntegratorTemplate" ng-click="$parent.export()" style="color:blue;cursor: pointer;" class="ng-binding ng-scope">blue</span>     

</div>

Is there anythin wrong? i'm using the version of 14.1.0.46

[Abinaya Subbiah]

Hi Jemmy, 

Thanks for contacting Syncfusion support. 

We have checked issue with provided sample code and we were unable to reproduce the issue at our end and created a sample for your convenience. Please find  sample in below location. 

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

If you still face the same issue then could you please share bellow information. 

1. Full Grid sample code to reproduce the issue.
2. Essential studio version used.
3. Screenshot of browser console to check script error if any.

Regards, 

Abinaya S 

[Jemmy Lu]

Thanks for replying,after some trying I found the problem is from get JSON data from a WebAPI ,If the data is from local javascript object the template works,but if I change the datasource from WebAPI then the template won't compile ,below is the javascript :

 <script type="text/javascript">

      var app=angular.module('listCtrl', []);

      app.requires.push('ejangular');

        app.controller('PhoneListCtrl', function ($scope,dataService) {

          $scope.data=[{}];

                                 

          $scope.getData=function()

          {

               //$scope.data = [

              //{ targetNumber: 10007, targetType: "z/OS", Color:"red" },

              //{ targetNumber: 1234, targetType: "Oracle",Color: "green" },

              //{ targetNumber: 90000001, targetType: "Windows",Color:"blue" }];

                 $scope.data=dataService.get();

          }

          

           

              $scope.toolbar = ["add", "edit", "delete", "update", "cancel"]

              $scope.col = [

                            { "field": "Color","textAlign": "right",},

                            { "field": "targetNumber", "headerText": "TargetNumber" },

                            {headerText: "Template", template: "true", templateID: "#myTemplate" }]

              

              $scope.getData();

          });

    </script>

[Abinaya Subbiah]

Hi Jemmy, 

We have analyzed the reported issue and considered this requirement “Template not rendered after refresh datasource” as bug and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

For now you can use _trigger (“refresh”) function to refresh the datasource after get data from data service. Please refer to below code sample. 

<script type="text/javascript"> 

        

      var app=  angular.module('listCtrl', ['ejangular']) 

         app.controller('PhoneListCtrl', function ($scope,dataService) { 

                $scope.data=[{}]; 

              $scope.getData=function() 

               {  

                 . . . . 

                 $scope.Grid._trigger("refresh"); 

                            

                 . . . .                         

               } 

              . . . . .  

              $scope.getData(); 

          }); 

    </script> 

 

Please check below information for getting widget reference inside controller. 

 

http://help.syncfusion.com/js/angularjs#getting-widget-reference-in-controller 

 

Regards, 

Abinaya S