angularjs - Angular ui grid - specific class for unselectable row -

i use angular ui-grid display data.

i enabled option select row in gridoptions:

enablerowselection: true,

but specific rows disable selection code:

$scope.mygrid.isrowselectable = function (row) {     if (row.entity.id == 2) {         return false;     } else {         return true;     } }; 

this work, cant select row id =2,

but want add class row notify unselectable.

any idea?

to highlight actual row:

you can write own rowtemplate , assign class row based on entity id this,

 var rowtemplate =  '<div>' +                  '  <div ng-class="{ \'red\': row.entity.company==\'enersol\' }" ng-repeat="(colrenderindex, col) in colcontainer.renderedcolumns track col.coldef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isrowheader }"  ui-grid-cell></div>' +                  '</div>';   $scope.gridoptions = {     rowtemplate:rowtemplate,     enablesorting: true,     columndefs: [       { field: 'name'},       { field: 'company'}     ]   }; 

instead of row.entity.company=\'enersol\' can change row.entity.id , assign class name.

in example the 'red' gives background color of yellow , foreground color of red.

take @ plnkr. http://plnkr.co/edit/vaqby235lfz7wlvy0fcc?p=preview

to modify actual row header icons:

you can override template selection row header buttons , add custom class css. inject templatecache in controller , override template this.

$templatecache.put('ui-grid/selectionrowheaderbuttons',     "<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isselected , 'ui-grid-icon-cancel':!grid.appscope.isselectable(row.entity), 'ui-grid-icon-ok':grid.appscope.isselectable(row.entity)}\" ng-click=\"selectbuttonclick(row, $event)\">&nbsp;</div>"   ); 

the template uses method in controller scope identify whether row selectable.

sample plnkr here http://plnkr.co/edit/vaqby235lfz7wlvy0fcc?p=preview