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;
            }
        });

giaffa86 · Accepted Answer · 2017-03-13 11:32:24Z

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.

answered Mar 13, 2017 at 11:32

giaffa86

7391 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JavaUser Over a year ago

Thanks . Do i need to write updateColumnsDefs() definition after $scope.gridUsers definition ?

giaffa86 Over a year ago

Function position does not matter. The only thing that matters is updateColumnsDefs() function must be called before $scope.gridUsers initialization. My vm.gridOptions is equivalent to your $scope.gridUsers.

JavaUser Over a year ago

Ok . I need to move only the column which irequires enable/disable property ..right?

giaffa86 Over a year ago

Note that I used a forEach. As I did, you can build a switch-case for filtering colums by field name.

JavaUser Over a year ago

Thanks Giaffa , this is not working when I am having 20 rows and change the page size to 5 . When moving to next page , the change is not applied.

|

Collectives™ on Stack Overflow

angular ui-grid enable disable row element based on flag

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related