I am trying to divide a Row into two ie. Row Span in Angular JS UI Grid. I am not able to find how to do this.I need different color schemes for rows within the rows of the UI grid. Can anyone please help me with this and give me some related fiddle or plunker to refer. Thanks in advance.
I have a RowSpan hack, suitable for my need, not necessarily suitable for every case: I use position:absolute on the top row's cell and display:none on the spanned rows' cells. See http://plnkr.co/edit/TiQFJnyOvVECOH2RL4ha
Everything is in the ng-style in the cell template, which uses a spanCompany attribute to know the number of rows to override. We have to calculate the height and width since we are position:absolute. This also means the width has to be expressed in px, not %.
ng-style extract:
ng-style="{
height:21*row.entity.spanCompany+'px',
width:col.width+'px',
position:'absolute',
display:row.entity.spanCompany==0?'none':'block'
}"
Full code:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo has a rather long company name that might need to be displayed in a tooltip",
"spanCompany":2,
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Enormo",
"spanCompany":0,
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"spanCompany":1,
"employed": false
}
];
$scope.gridOptions = {
columnDefs: [
{ name: 'firstName', width: '20%' },
{ name: 'lastName', width: '20%' },
{ name: 'company', width: '200',
cellTemplate: '<div class="ui-grid-cell-contents wrap" title="TOOLTIP" ng-style="{ height:21*row.entity.spanCompany + \'px\', width:col.width+\'px\', position:\'absolute\', display:row.entity.spanCompany==0?\'none\':\'block\', borderStyle:\'dotted\', borderWidth:\'1px\'}" >{{COL_FIELD CUSTOM_FILTERS}}</div>'
},
{ name: 'employed', width: '30%' }
],
data: 'data',
rowHeight: 21
};
}]);
