angular ui-grid enable disable row element based on flag

Question

I am using angular ui-grid to show list of rows from database table(Users). I am doing a back end call and NodeJS fetches the data from DB and returns. This data is being shown in angular ui-grid.

I want to enable or disable few html elements ., view/edit/delete based on the accessibility of the current user. If the current user is ADMIN then all the links are enabled. If he is BASIC user then VIEW is enabled and EDIT and DELETE are disabled. Project accessibility is also returned from the server . I just need to check this flag and disable/enable the links. Please let me know , how to do this?

id  name    actions
1   AAA     view edit delete 
2   BBB     view edit delete 
3   CCC     view edit delete 
4   DDD     view edit delete 

  <div class="box">
        <div class="box-content box-table">
            <div ui-grid="gridUsers" ui-grid-pagination>
            </div>
        </div>
  </div>


  $scope.gridUsers = {
            paginationPageSizes: [15, 30, 45],
            paginationPageSize: 15,
            enableColumnMenus: false,
            data: $scope.users,
            filterOptions: $scope.filterOptions,
            columnDefs: [{ field: 'id', displayName: 'Id', width: '20%'},
                { field: 'name', displayName: 'Name', width: '25%', enableFiltering: true},
                { name: 'Actions', displayName: 'Actions', width: '55%', cellTemplate:
                '<div class="grid-action-cell action-btns">'+
                '<span class="btn-small"><span style="color:#214c77;">view</span> </a>' +
                '<a ng-click="grid.appScope.edit(row.entity.id)" class="btn-small btn-link"><span style="color:#80bb41;">edit</span> </a>' +
                '<a ng-click="grid.appScope.delete(row.entity.id)" class="btn-small btn-link"> <span style="color:#e15829;">delete</span> </a>' 
                '</div>'}
            ]
        };


 Service.GetAllUsers(function (response) {
            if (response.length != 0) {
                $scope.users = response;
                $scope.gridUsers.data = $scope.users;
            }
        }); 

Answer 1

I had the same problema. In order to resolve it, I call a function after retrieving columns :

        function updateColumnsDefs() {
                columnsDefs
                        .forEach(function(column) {
                            switch (column.field) {
                                case 'status' :
                                    columnVal = '<span ng-if="c.' + column.filterBy + '">{{c.' + column.filterBy + '}}</span>';
                                    column.cellTemplate = '<div class="ui-grid-cell-contents">' + columnVal + '</span></div>';
                                    break;
                                default :
                                    break;
                            }
         }

Look how I made a dynamic cellTemplate using ng-if.

After that, I apply the updated columnsDefs to gridOptions:

updateColumnsDefs();
vm.gridOptions = {
                    ...
                    columnDefs : columnsDefs,
                    ...
                };

You should pay attention if use lazy loading or filter. In that case remember to recall updateColumnsDefs every time your data model changes.