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 angular Template

Thread ID:

Created:

Updated:

Platform:

Replies:

121676 Jan 15,2016 06:20 AM Jan 19,2016 12:06 AM JavaScript 3
loading
Tags: ejGrid
Yann Bruneau
Asked On January 15, 2016 06:20 AM

Hi,

Following your sample  at http://jsplayground.syncfusion.com/pzmzwo2g , I tried to do the same with remote data but I cannot make it works... I get all the data correctly but the template columns does not works.

Would you have an idea why this works:

    <div id="grid" ej-grid e-datasource="data" e-allowpaging="true" >
      <div e-columns>
        <div e-column e-headertext="Color" e-template="<span>Templated: {{data.Color}}</span>"></div>
      </div>
    </div>
    <script type="text/javascript">
        angular.module('listCtrl', ['ejangular'])
          .controller('PhoneListCtrl', function ($scope) {
              var obj = [{Color:"red" }, {Color: "green" }, {Color:"blue" } ];
              $scope.data = obj;             
          });
    </script>

But not:

    <script type="text/javascript">
        angular.module('listCtrl', ['ejangular'])
          .controller('PhoneListCtrl', function ($scope) {

var dataManager = ej.DataManager({url: "xxxxxx", adaptor: new ej.UrlAdaptor()

});

$scope.data = dataManager;


          });
    </script>


I get the data, but the template does not works, I get Templated: {{data.Color}}


Ragavee U S [Syncfusion]
Replied On January 18, 2016 06:38 AM

Hi Yann,

We considered this query “Template column not rendered in angularJS when binding remote data” as a bug and a support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.

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

As of now, we suggest you to define the template using the angular scope and jsrender. Please refer to the below code example.

<div e-columns>

            <div e-column e-headertext="City" e-template="true" e-templateid='template' ></div>
        </div>

<script type="text/x-jsrender" id="template">

        <span>Templated: {{:ShipCity}}</span>
    </script>

<script type="text/javascript">

        angular.module('listCtrl', ['ejangular'])

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

              var dataManger = ej.DataManager({

                  url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"

              });


              $scope.data = dataManger;

              $scope.template = "#template";

          });
    </script>


We have modified the sample with the above solution, which can be downloaded from the below location.

Sample Link: http://jsplayground.syncfusion.com/3z0dv2s5

Regards,
Ragavee U S.

Yann Bruneau
Replied On January 18, 2016 09:01 AM

Hi Ragavee,

Thank you for your answer. I will work with your workaround until the fix is released.

Yann 

Ragavee U S [Syncfusion]
Replied On January 19, 2016 12:06 AM

Hi Yann,

Please refer to incident created under your account for better follow up on the issue status.

Regards,
Ragavee U 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

;