How to call a function from cell template in ui-grid in angularjs?

Question

I have one controller in angularJs(1.6) which is using ui-grid. Problem is there is one cell template. I want to get its value from a function. I have tried creating a function and tried to call it using grid.appScope.function. But it did not work. I have tried to put my function with vm also. But to not avail.

Could anyone please help me with this?

Here is my controller code:

 (function () {
    'use strict';

     define([
         'angular'
     ], function (angular) {

     function SelectToolController($scope, $timeout, $filter, uiGridConstants) {
                  var vm = this,
                      _gridApi,
                      _cellTemplate,
                      _columnDefs,
                      _starRatingTemplate,
                      _starRatingColumn,
                      _starEnable;
            };
            _starRatingTemplate = [
                  '<div class="opr-star-rating"  >',
                  '<opr-star-rating rating-percentage="getRating()">',
                  '</opr-star-rating>',
                  '</div>'
            ].join('');

      //this func need to be called from _starRatingTemplate 
       vm.getRating = function(){
           return 10;
        }

        function gridInitialized(gridApi) {
            _gridApi = gridApi;
          }

      });

alok modi · Accepted Answer · 2018-11-16 11:20:26Z

1

We can access parent scope inside grid cell template using "grid.appScope" object.

If you have created getRating function as $scope.getRating(){..} in parent controller then you can access it as following

rating-percentage="grid.appScope.getRating()"

If you have created getRating function inside vm object of controller and used controller as following

 <div ng-controller="SelectToolController as SelectToolCtl">
....
 </div>

then simple use rating-percentage="grid.appScope.SelectToolCtl.getRating()"

edited Nov 16, 2018 at 11:20

answered Nov 16, 2018 at 11:10

alok modi

263 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anubha Gupta Over a year ago

Hi, Thanks for your answer. Problem is when I used your approach I see this error: "The controller with the name 'SelectToolController' is not registered." Though it is there as you can see. Could you please tell me what could be the possible reason?

alok modi Over a year ago

you have to register your controller angular.controller('SelectToolController', ['$scope', '$timeout', '$filter', 'uiGridConstants', SelectToolController]);

Anubha Gupta · Accepted Answer · 2018-11-19 08:56:39Z

0

I am posting answer of my own query.

Below setting in cellTemplate worked for me:

  _starRatingTemplate = [
                  '<div class="opr-star-rating"  >',
                  '<opr-star-rating rating-percentage="+vm.getRating()+">',
                  '</opr-star-rating>',
                  '</div>'
   ].join('');

answered Nov 19, 2018 at 8:56

Anubha Gupta

1891 gold badge3 silver badges17 bronze badges

1 Comment

ArielGro Over a year ago

This will call the function only once when creating the string, as you already found out in your other question posted: stackoverflow.com/questions/53371278/…

Collectives™ on Stack Overflow

How to call a function from cell template in ui-grid in angularjs?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related