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.

Angular directive inside a Grid Template

Thread ID:

Created:

Updated:

Platform:

Replies:

121432 Dec 14,2015 11:54 AM Dec 17,2015 08:44 AM ASP.NET MVC 6
loading
Tags: Grid
Rob ONeill
Asked On December 14, 2015 11:54 AM

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.


Saravanan Arunachalam [Syncfusion]
Replied On December 15, 2015 08:03 AM

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.


Rob ONeill
Replied On December 15, 2015 04:56 PM

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>

Saravanan Arunachalam [Syncfusion]
Replied On December 16, 2015 08:48 AM

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.


Rob ONeill
Replied On December 16, 2015 11:10 AM

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.

Rob ONeill
Replied On December 16, 2015 11:57 AM

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.

Saravanan Arunachalam [Syncfusion]
Replied On December 17, 2015 08:44 AM

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.



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.

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.

;