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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Angular directive inside a Grid Template

Angular directive inside a Grid Template

Hi,
I have a syncfusion grid (using angularjs) that has a template column. I am trying to add a ng-click to that template, but it never fires.

    <div id="servicesGrid" ej-grid e-isresponsive="true"
         class="grid-detail"
         e-columns="servicesColumns"
         e-datasource="servicesDataSource"
         e-allowpaging="true"
         e-pagesettings-pagesize="15"
         e-allowselection="false"
         e-allowfiltering="true"
         e-filtersettings-filtertype="excel"
         e-allowscrolling="true"
         e-scrollsettings-width="scrollSettingsWidth">
    </div>

One of the columns has the following template

<script type="text/x-jsrender" id="dateNowTemplate">
    <div>
        {{if dateNow === 'green'}}
        <i class="fa fa-circle fa-3x" ng-click="alert('hi')" style="color: green; cursor: pointer;"></i>
        {{/if}}
        {{if dateNow === 'amber'}}
        <i class="fa fa-circle fa-3x" ng-click="alert('hi')" style="color: orange; cursor: pointer;"></i>
        {{/if}}
        {{if dateNow === 'red'}}
        <i class="fa fa-circle fa-3x" ng-click="alert('hi')" style="color: red; cursor: pointer;"></i>
        {{/if}}
    </div>
    <div style="clear: both;"></div>
    <div style="float: left; height: 5px; background-color: green; width: {{:dateNowGreen}}%"></div>
    <div style="float: left; height: 5px; background-color: orange; width: {{:dateNowAmber}}%"></div>
    <div style="float: left; height: 5px; background-color: red; width: {{:dateNowRed}}%"></div>
</script>

The ng-click never fires ?? Is there a way to get the click to fire ?

Cheers ... Rob.


6 Replies
SA Saravanan Arunachalam Syncfusion Team December 15, 2015 01:03 PM UTC

Hi Rob,

Thanks for contacting Syncfusion support.

We have achieved your requirement “Bind the ng-click event for the template column” by render the template column with script type “text/ng-template”. Please refer to the below code example.

<script type="text/ng-tempalte" id="actionTemplate">

        

        <span id='exportIntegratorTemplate' ng-click='$parent.export()' style='color:{{data.Color}};cursor: pointer;'>{{data.Color}}</span>

    

   </script>


We have prepared the simple sample using JS playground

http://jsplayground.syncfusion.com/rqaknwgc

Regards,

Saravanan A.


RO Rob ONeill December 15, 2015 09:56 PM UTC

Hi,
Thanks for the example, although I needed to modify to get it to work to show the correct color. From your example to get the color right in the template I needed to use ng-style.

    <script type="text/ng-template" id="actionTemplate">
        <span id='exportIntegratorTemplate' ng-click='$parent.export()' ng-style="{'color':data.color, 'cursor': 'pointer'}">{{data.targetNumber}}</span>
    </script>

I also need to have a DetailsTemplate that will hold another grid similar to the first, with another ng-click. Can this be done, as I have tried to implement this on the jsplayground, but cannot get it to work.

See my code below

Regards
Rob.


<!doctype html>
<html lang="en" ng-app="listCtrl">
<head>
    <meta charset="utf-8" />
    <title>Essential Studio for JavaScript : Angular support</title>
  
    <link rel='nofollow' href="13.2.0.29/themes/web/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
    <link rel='nofollow' href="13.2.0.29/themes/web/default.css" rel="stylesheet" />
    <link rel='nofollow' href="13.2.0.29/themes/web/default-responsive.css" rel="stylesheet" />
    <link rel='nofollow' href="13.2.0.29/themes/web/responsive-css/ej.responsive.css" rel="stylesheet" />
    <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
     <!--[if lt IE 9]>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <![endif]-->
    <!--[if gte IE 9]><!-->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!--<![endif]--> 
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
    <script src="https://cdn.syncfusion.com/13.3.0.18/js/web/ej.web.all.min.js"></script>
    <script src="13.2.0.29/scripts/web/jsondata.min.js"></script>
    <script src="https://cdn.syncfusion.com/13.3.0.18/js/common/ej.widget.angular.min.js  "></script>
    <script src="13.2.0.29/scripts/web/properties.js" type="text/javascript"></script>
</head>
<body ng-controller="PhoneListCtrl">
   
  
   
    <div id="grid" ej-grid e-datasource="data" e-columns="col" e-allowpaging="true" e-allowselection="false" e-detailstemplate="#detailsTemplate" e-detailsdatabound="getDetailsData"></div>
   <script id="detailsTemplate" type="text/x-jsrender">
              <div id="detailsGrid">
              </div>
 </script>
    <script type="text/ng-template" id="actionTemplate">
        <span id='exportIntegratorTemplate' ng-click='$parent.export()' ng-style="{'color':data.color, 'cursor': 'pointer'}">{{data.targetNumber}}</span>
    </script>
    <script type="text/javascript">
        angular.module('listCtrl', ['ejangular'])
          .controller('PhoneListCtrl', function ($scope) {

              var obj = [
            { targetNumber: 10007, targetType: "z/OS", color:"red" },
            { targetNumber: 1234, targetType: "Oracle",color: "green" },
                        { targetNumber: 90000001, targetType: "Windows",color:"blue" }
              ];
              $scope.data = obj;
             
              $scope.export = function () {
               
                  alert("export");
              }
            
              $scope.toolbar = ["add", "edit", "delete", "update", "cancel"]
              $scope.col = [
                            { field: "color", headerText: "Color", width: 100 },
                            { field: "targetNumber", headerText: "TargetNumber", width: 100 },
                            { headerText: "Ng click", template: "true", templateID: "#actionTemplate", textAlign: "right", width: 90 },
                 { field: "targetType", headerText: "TargetType", width: 100 }]
             
              $scope.getDetailsData = function(e) {
                e.detailsElement.find("#detailsGrid").ejGrid({
                    dataSource: $scope.data,
                    allowSelection: false,
                    allowSorting: false,
                    columns: $scope.col
                });
              }
          });
    </script>
</body>
</html>

SA Saravanan Arunachalam Syncfusion Team December 16, 2015 01:48 PM UTC

Hi Rob,

If we rendered the same template for both parent and detail Grid’s column, we can’t call the parent Grid’s scope method ($scope.export) while click on the template column of details grid.  

So, we suggest you to use the separate template for both Grid and detail Grid control and refer to the below code example.

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

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


               . . .

              //Columns for Details Grid

              $scope.col1 = [

                            . . .

                            { "headerText": "Ng click1", "template": "true", "templateID": "#actionTemplate1", "textAlign": "right", "width": 90 }];

              //Columns for Parent Grid

              $scope.col = [

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

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

                             { field: "targetType", headerText: "TargetType", width: 100 },

                             { "headerText": "Ng click", "template": "true", "templateID": "#actionTemplate", "textAlign": "right", "width": 90 }]

          });


<!--Template for parent-->

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

        <span id='exportIntegratorTemplate' ng-click='$parent.export()' ng-style="{'color':data.Color, 'cursor': 'pointer'}">{{data.Color}}</span>

    </script>

    <!--Template for child-->

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

        <span id='exportIntegratorTemplate' ng-click='$parent.$parent.export()' ng-style="{'color':data.Color, 'cursor': 'pointer'}">{{data.Color}}</span>

    </script>

And we have rendered the detail template Grid using the script type ng-template and refresh the template using the “detailsDataBound” event of Grid control. Please refer to the below code example.

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

    <div id="grid1" ej-grid e-datasource="$parent.data" e-columns="$parent.col1">

    </div>

</script>

$scope.detailgrid = function (e) {

     this._trigger("refresh");

};



We have created the sample in JS playground.

http://jsplayground.syncfusion.com/mpprbv2o

Regards,

Saravanan A.


RO Rob ONeill December 16, 2015 04:10 PM UTC

Hi,
That's great. How do you get it to work with multiple rows, and therefore multiple details templates. In the example the DetailsGrid will always have static data to $parent.Data (or another value defined). I need the details the templates to be dynamic aswell.

Cheers ... Rob.

RO Rob ONeill December 16, 2015 04:57 PM UTC

I nearly have it working


But as soon as ng-click is triggered all child templates revert to the last created details templates (ie static data). Need to have this data as dynamic.

SA Saravanan Arunachalam Syncfusion Team December 17, 2015 01:44 PM UTC

Hi Rob,

We analyzed your sample in which you have changed $scope.getData dynamically based on the detail grid and then while clicking on the template column of detail Grid, all the details Grid’s will be refreshed with the recently updated datasource by $scope.getData on angular context which may be the cause of issue.

So, we suggest you to delete scope of the $scope.getData in export method and refer to the below code example.

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

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


        $scope.export = function (color) {

                 

                  alert("Color is : " + color);

                  delete $scope.getData;

              };

});



We have modified your sample and refer the below link.

http://jsplayground.syncfusion.com/ovmeamv2

Regards,

Saravanan A.

Hi Rob,

We analyzed your sample in which you have changed $scope.getData dynamically based on the detail grid and then while clicking on the template column of detail Grid, all the details Grid’s will be refreshed with the recently updated datasource by $scope.getData on angular context which may be the cause of issue.

So, we suggest you to delete scope of the $scope.getData in export method and refer to the below code example.

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

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


        $scope.export = function (color) {

                 

                  alert("Color is : " + color);

                  delete $scope.getData;

              };

});



We have modified your sample and refer the below link.

http://jsplayground.syncfusion.com/ovmeamv2

Regards,

Saravanan A.



Loader.
Live Chat Icon For mobile
Up arrow icon