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. Image for the cookie policy date

ejGrid with angularjs template doesn't compile

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


3 Replies

AS Abinaya Subbiah Syncfusion Team June 15, 2016 10:30 AM UTC

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. 


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 



JL Jemmy Lu June 16, 2016 02:55 AM UTC

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>


AS Abinaya Subbiah Syncfusion Team June 16, 2016 12:39 PM UTC

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. 


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. 
 
 
Regards, 
Abinaya S 


Loader.
Up arrow icon