CODEWITHSUNDEEP
javascriptjqueryangularjsangular-ui-grid
BrianLegg
BrianLegg

Reputation: 1700

Angular JS ui-grid cellTemplate's ng-click not firing when scope function tries to pass the cell info as params

I can't seem to get ng-click to fire for me and I've been trying for hours. I've read a bunch of similar issues on SO, but none seem to fix my issue. Note that if I change ng-click to onclick the event fires.

My JS:

var app = angular.module('app', ['ngTouch', 'ngAnimate', 'ui.grid', 'ui.grid.moveColumns', 'ui.grid.resizeColumns']);

app.controller('matterController', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {

    var industryFields,
        departmentFields,
        regionFields;

    $scope.gridOptions = {
        enableFiltering: true,
        enableColumnResizing: true,
        enableSorting: true,
        columnDefs: [
            { name: 'Client_Name', width: 120, enableHiding: false },
            { name: 'Client_Number', width: 140, enableHiding: false },
            { name: 'Matter_Name', width: 130, enableHiding: false },
            { name: 'Matter_Number', width: 140, enableHiding: false },
            { name: 'Billing_Partner', width: 250, enableHiding: false },
            { name: 'Matter_Descriptions', width: 180, enableHiding: false
, cellTemplate: '<div class="ui-grid-cell-contents"><a ng-href="#" ng-click="displayDescription(\'{{COL_FIELD}}\');">View Description</a></div>' },
            { name: 'Industries', width: 120, enableHiding: false },
            { name: 'Departments', width: 130, enableHiding: false },
            { name: 'Regions', width: 120, enableHiding: false }
        ],
        showGroupPanel: true
    };

    function loadData() {
        $http.get('api/ClientMatter/')
        .success(function (data) {
            $scope.gridOptions.data = data;
        });

        $http.get('Home/GetIndustries')
        .success(function (data) {
            industryFields = data;
        });

        $http.get('Home/GetDepartments')
        .success(function (data) {
            departmentFields = data;
        });

        $http.get('Home/GetRegions')
        .success(function (data) {
            regionFields = data;
        });
    }

    $scope.displayDescription = function(data) {
        alert(data);
    }

    loadData();
}]);

The "Matter_Descriptions" column has a custom cell template which needs to call the "displayDescription" method. So far I can't get it to fire at all.

My HTML:

<div class="screen-container" ng-controller="matterController">
    <button onclick="location.href = '@Url.Action("Create", "Home")'; return false;" style="float: right;">New Matter</button>
    <br/><br/>
    <div id="home-grid" ui-grid="gridOptions" class="grid" ui-grid-move-columns ui-grid-resize-columns></div>
</div>

And here is a screen shot of the hyperlink at runtime showing the data exactly as I want it:

enter image description here

Pretty basic. Any help is appreciated! Thanks!

Upvotes: 4

Views: 4047

Answers (2)

Jenna Leaf
Jenna Leaf

Reputation: 2452

You DO NOT NEED BRACES because you are inside ng already when you apply ng-directive's: 

<button ng-click = 'yourscopefn(yourscopevars,,)'>buttonface</button>

you don't do this :

<button ng-click = 'yourscopefn({{yourscopevars}},,)'>buttonface</button>

wrong!!

All you need to do for your ui-grid column def celltemplate is:

{ name: 'yourcolumn', cellTemplate: 
' <a ng-href="#" ng-click="grid.appScope.yourfunction(COL_FIELD);">{{COL_FIELD}}</a>' }

Upvotes: 3

BrianLegg
BrianLegg

Reputation: 1700

I found the solution thanks to this post on SO: Button click does not work in Celltemplate angular grid

It turns out I needed to change:

ng-click="displayDescription(\'{{COL_FIELD}}\');

To:

ng-click=\'grid.appScope.displayDescription("{{COL_FIELD}}");

I couldn't tell you why this works, but my application is now working as expected. Thanks to those who commented.

Upvotes: 1

Related Questions