Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
65
iggrid on AngularJS view: How to call a controller function from a column template with button / onclick
posted

iggrid on AngularJS view: How to call a controller function from a column template with button / onclick

I am developing an AngularJS app using iggrid with declarative options. The grid is bound to a datasource and is showing the data. So far it's working fine.

Now I added a column using a column template inluding a button group for executing several actions on each row. Here is the column definition:

<column key="actions" header-text="Aktionen" data-type="string" template="{{getHtml('#colTemplate')}}"></column>

An this is the column template (for simplicity I show just one button):

<script id="colTemplate" type="text/template" ng-non-bindable>
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default"><i class="fa fa-edit fa-fw" onclick="viewDetails(${id})"></i></button>
    </div>
</script>

As you can see, I try to call the function viewDetails() of the views controller. This function looks like this:

function viewDetails(id) {
    common.$location.path('/portale/detail/' + id);
}

Other functions resp. action handlers like this need to work and manipulate the grids datasource.

Clicking on the button is throwing the following error on the javascript console:

Uncaught ReferenceError: viewDetails is not defined

How can I call the controller function?

Any help would be appreciated.

Parents
  • 23953
    Verified Answer
    Offline posted

    Hello Peter,

    The igGrid Angular directive doesn't compile the DOM generated by the igGrid itself. This is the reason that viewDetails function is not lookup in the $scope.

    The easiest way to call viewDetails on the $scope is to get the reference to the $scope using the angular.element API:

    <i class="fa fa-edit fa-fw" onclick="angular.element('#grid1').scope().viewDetails(${id})"></i>

    Hope this helps,
    Martin Pavlov
    Infragistics, Inc.

Reply Children