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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejGrid with angularjs template doesn't compile

Thread ID:

Created:

Updated:

Platform:

Replies:

124562 Jun 15,2016 03:04 AM UTC Jun 16,2016 12:39 PM UTC JavaScript 3
loading
Tags: ejGrid
Jemmy Lu
Asked On June 15, 2016 03:04 AM UTC

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 [Syncfusion]
Replied On 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 


Jemmy Lu
Replied On 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>

Abinaya Subbiah [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;