Why I get error parameter is undefined?

Question

In my project I use ui-grid to filter table.

Here the javascript code:

(function () {
    "use strict";

    angular.module("workPlan").controller("workPlanListController", ["workPlans",
        "clients",
        "inspectionAuthority",
        "$http",
        "config",
        "workPlanServise",
        workPlanListController
    ]);


    function workPlanListController(workPlans,
        clients,
        inspectionAuthority,
        $http,
        config,
        workPlanServise
    ) {
        var self = this;

        this.workPlanList = workPlans;
        this.lookups = {
            client: clients,
            authority: inspectionAuthority
        };

        this.gridOptions = {
            expandableRowTemplate: 'app/workPlan/templates/expandableRowTemplate.tmpl.html',
            expandableRowHeight: 150,
            enableColumnMenus: false,
            enableSorting: true,
            enableFiltering: false,
            enableToopTip: true,
            enableHorizontalScrollbar: 0,
            onRegisterApi: function (gridApi) {
                gridApi = gridApi,
                gridApi.expandable.on.rowExpandedStateChanged(null, function (row) {
                    if (row.isExpanded) {
                        row.entity.subGridOptions = {
                            enableColumnMenus: false,
                            enableSorting: true,
                            enableFiltering: false,
                            enableToopTip: true,
                            enableHorizontalScrollbar: 0,
                            columnDefs: [{ name: 'Frequency', field: 'inspectionFrequencyName', cellTooltip: true },
                                         { name: '# Sites', field: 'siteCount', cellTooltip: true },
                                         { name: 'Fixed Sites', field: 'normalSitesCount', cellTooltip: true }]
                        };
                        var arr = [];

                        workPlanServise.getSubGridContent(row.entity.clientId).then(function (result) {
                            row.entity.subGridOptions.data = result.data;

                            for (var i = 0; i < result.data.length ; i++) {
                                arr.push(
                                     {
                                         inspectionFrequencyName: row.entity[i].inspectionFrequencyName,
                                         items2inspect: row.entity[i].itemssiteCount2inspect,
                                         normalSitesCount: row.entity[i].normalSitesCount,
                                     });
                            }
                            row.entity.subGridOptions.data = arr;
                        });
                    }
                });
            }
        }

        this.gridOptions.columnDefs = [
        { name: 'Client', field: 'clientName', cellTooltip: true, headerTooltip: true },
        { name: '# Sites', field: 'siteNumbers', cellTooltip: true, headerTooltip: true },
        { name: '#FixedSites', field: 'siteNumbersInspected', cellTooltip: true, headerTooltip: true }];

        this.gridOptions.data = self.workPlanList;


        this.filterByClient = function () {
            gridApi.grid.refresh()
            singleFilter(self.gridApi.grid.rows, 'clientName', self.clientName);
        };


        this.singleFilter = function (renderableRows, field, filterValue) {
           var matcher = new RegExp(filterValue);
            renderableRows.forEach(function (row) {
               var match = false;

               if (row.entity[field].match(matcher)) { match = true; }

               if (!match) {
                   row.visible = false;
               }
           });
            return renderableRows;
        };
    }
})();

The view:

<div class="panel panel-default">
    <div class="panel-heading">
        <h4>work plan</h4>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="input-group">
            <input type="text" class="form-control" placeholder="Filter by client...">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ng-click='list.filterByClient()'>
                        <i class="glyphicon glyphicon-filter"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div ui-grid="list.gridOptions" dir="rtl" ui-grid-expandable ui-grid-resize-columns class="grid"></div>

</div>

When I press Filter in view this function has been called:

    this.filterByClient = function () {
        gridApi.grid.refresh()
        singleFilter(self.gridApi.grid.rows, 'clientName', self.clientName);
    };

and in this row:

gridApi.grid.refresh()

I get this: error:

Cannot read property grid of undefined

While in this similar example it works fine.

Any idea why I get error above?

Answer 1

You have to inject gridApi into the scope as the example does:

onRegisterApi: function(gridApi){
  $scope.gridApi = gridApi;
  // [...]
},

And then you can refer to it with:

$scope.gridApi.grid.refresh();

In your case just change $scope with this

Answer 2

The problem is, gridApi parameter is in only accessible inside the onRegisterApi function unless you assign it to some other variable.

onRegisterApi: function (gridApi) {
    gridApi = gridApi, // Nothing happens by this line
}

You will have to try this way.

 var gridApi;
 this.gridOptions = {
            expandableRowTemplate: 'app/workPlan/templates/expandableRowTemplate.tmpl.html',
            expandableRowHeight: 150,
            enableColumnMenus: false,
            enableSorting: true,
            enableFiltering: false,
            enableToopTip: true,
            enableHorizontalScrollbar: 0,
            onRegisterApi: function (gridApiParam) {
               gridApi = gridApiParam, //Or assign the `gridApiParam` to `this` and access it the same way
               .......................
               .......................
            }
            .......................
            .......................
}