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)\"> </div>" );
the template uses method in controller scope identify whether row selectable.
sample plnkr here http://plnkr.co/edit/vaqby235lfz7wlvy0fcc?p=preview
Comments
Post a Comment