ejGrid angular Template

[Yann Bruneau]

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]

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]

Hi Ragavee,

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

Yann 

[Ragavee U S]

Hi Yann,

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

Regards,
Ragavee U S.