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 · Answer 1 · 2018-11-16T11:20:26.627

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 '18 at 11:20

answered Nov 16 '18 at 11:10

alok modi

26
3

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? – Anubha Gupta Nov 19 '18 at 05:12
you have to register your controller angular.controller('SelectToolController', ['$scope', '$timeout', '$filter', 'uiGridConstants', SelectToolController]); – alok modi Nov 20 '18 at 09:04

score 0 · Accepted Answer · answered Nov 19 '18 at 08:56

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 '18 at 08:56

Anubha Gupta

189
2
17

This will call the function only once when creating the string, as you already found out in your other question posted: https://stackoverflow.com/questions/53371278/how-to-call-a-function-multiple-times-from-cell-template-in-ui-grid-in-angularjs – ArielGro Nov 21 '18 at 07:57

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

2 Answers2