How can I dynamically change the CSS style when the page size is adjusted in Angular UI-Grid?
In my use case, I need to display edit/delete options in grey color based on the type of user logged in. The ng-disabled directive is set based on the "row.entity.isEditable" flag from the server side, and the style is applied accordingly.
While this works well when all rows (let's say 15) are displayed in a single view, changing the page size to 5 or 10 causes the style to not render correctly, resulting in inappropriate coloring for the links in the UI.
Could you please advise on how to resolve this issue? Alternatively, do you have any other suggestions for handling this situation?
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>
<style type="text/css">
a[disabled="disabled"] {
pointer-events: none;
}
span[disabled="disabled"] {
color: #a8a8a8 !important
}
</style>
$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-disabled={{!row.entity.isEditable}} ng-click="grid.appScope.edit(row.entity.id)" class="btn-small btn-link"><span ng-disabled={{!row.entity.isEditable}} style="color:#80bb41;">edit</span> </a>' +
'<a ng-disabled={{!row.entity.isEditable}} ng-click="grid.appScope.delete(row.entity.id)" class="btn-small btn-link"> <span ng-disabled={{!row.entity.isEditable}} style="color:#e15829;">delete</span> </a>'
'</div>'}
]
};
Service.GetAllUsers(function (response) {
if (response.length != 0) {
$scope.users = response;
$scope.gridUsers.data = $scope.users;
}
});
Thank you!