CellFilter is getting called before $http Response in UI-Grid

S

2

7

I am using ui-grid to bind data from Role Table which contains Department Id as PrimaryKey. I am calling Web Api to get all the roles in the table and show in ui-grid.

Department Table

Role Table

My real problem is that I want to convert Department Id to Department Name when it binds to grid using cellFilter and that is why I declare objMapping to map Department Id with Department Name. But every time when I run I see that cellFilter custom function i.e. 'mapDepartmentName' is getting called before objMapping is being set and also I am not able to refer objMapping in 'mapDepartmentName'.

My grid looks like this:-

However when I edit I get the result as below which is absolutely correct:-

My code snippet as below:-

var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.edit']);
myApp.controller("ctrlRole", ['$scope', 'MetadataOrgFactory', function ($scope, MetadataOrgFactory) {    
    var arrDepts = [];
    var objMapping = {};

    MetadataOrgFactory.getApiCall('getpublisheddepts', function (dataSuccess) {
        $scope.department = dataSuccess;
        for (var cntElem = 0; cntElem < dataSuccess.length; cntElem++) {
            
            var objDept = { id: dataSuccess[cntElem].DeptId, DeptId: dataSuccess[cntElem].DeptName }
            arrDepts.push(objDept);

            objMapping[dataSuccess[cntElem].DeptId] = dataSuccess[cntElem].DeptName;
            
        }      
        $scope.gridRole.columnDefs[1].editDropdownOptionsArray = arrDepts;
    }, function (dataError) {
    });
   

    $scope.gridRole = {
        data: 'roleData',
        columnDefs: [
          {
              field: 'RoleName', displayName: 'Role Name',              
          },
          {
              field: 'DeptId', displayName: 'Department Name',             
              editableCellTemplate: 'ui-grid/dropdownEditor',
              cellFilter: 'mapDepartmentName:this',
              editDropdownValueLabel: 'DeptId',
          },
          {
              field: 'RoleDesc', displayName: 'About Role',              
          },
          {
              field: 'WorkingHrs', displayName: 'Working Hours',              
          },
          {
              field: 'RequestNumber', displayName: 'RequestNumber',
              cellEditableCondition: true
          }
         
        ]

    }

    MetadataOrgFactory.getApiCall('getallroles', function (dataSuccess) {
        $scope.roleData = dataSuccess;
    }, function (dataError) {
    });

    
}])

.filter('mapDepartmentName', function () {
    return function (input, scope) {
        if (!input) {
            return '';
        } else {
            return objMapping[input];
        }
    };
});

<!DOCTYPE html>
<html>
<head>
    <title></title>	
    <style>
        .gridStyle {
            border: 5px solid #d4d4d4;
            height: 200px;
        }
    </style>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    <script src="../Scripts/AngularControllers/RoleController.js"></script>
    <script src="../Scripts/AngularServices/ApiCallService.js"></script>
</head>
<body ng-app="appHome">
    <div ng-controller="ctrlRole">
       
        <div class="gridStyle" ui-grid="gridRole" ui-grid-edit>
        </div>
    </div>

</body>
</html>

Sweetie answered 1/5, 2017 at 10:33 Comment(0)

G

1

Call $scope.$apply() in getpublisheddepts at the end of factory callback.

as you didnt show ur factory I believe its doing something asynchronously which is not informing the view to reflect changes.

Gerah answered 4/5, 2017 at 21:23 Comment(1)

This is asynchronous call. $scope.$apply() is not helping also. – Sweetie 4/5, 2017 at 23:5

S

1

I stuck in the issue for long time. I did the following change in the code and I am getting the results as well. Please let me know if this is the correct solution for this:-

MetadataOrgFactory.getApiCall('getpublisheddepts', function (dataSuccess) {
        $scope.department = dataSuccess;
        for (var cntElem = 0; cntElem < dataSuccess.length; cntElem++) {

            var objDept = { id: dataSuccess[cntElem].DeptId, DeptId: dataSuccess[cntElem].DeptName }
            arrDepts.push(objDept);

            objMapping[dataSuccess[cntElem].DeptId] = dataSuccess[cntElem].DeptName;

        }   
        $scope.deptmapping = objDeptMapping;     //new code added here
        $scope.gridRole.columnDefs[1].editDropdownOptionsArray = arrDepts;
    }, function (dataError) {
    });

Filter Class

.filter('mapDepartmentName', function () {
    return function (input, scope) {
        if (!input) {
            return '';
        } else {
            return scope.grid.appScope.deptmapping[input]; //Change in code 
        }
    };
});

Sweetie answered 4/5, 2017 at 23:13 Comment(1)

that's essentially what you should do – Ithyphallic 5/5, 2017 at 7:43

Recommended topics

Hot tags