I need to customize a UI grid by merging some middle columns to achieve the following layout:
Name | Address | Comment | Job | College | Married
----------------------------------------------------------
Keshvi | India | New | Not applicable | No
----------------------------------------------------------
Currently, I am utilizing rowTemplate for this purpose.
function rowTemplate() {
return ' <div ng-repeat="(colRenderIndex, col) in grid.appScope.customiseRowsDeletedBy(colContainer.renderedColumns) track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
' <div class="other-override-background" >{{row.entity.job}}</div>' +
' <div ng-repeat="(colRenderIndex, col) in [colContainer.renderedColumns[5]]) track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ng-style="{position:\'absolute\, display:\'block\'}" ui-grid-cell ></div>'
'</div>';
}
$scope.customiseRowsDeletedBy = (arr) => arr.slice(0, 2);
However, the output is not as expected:
Name | Address | Comment | Job | College | Married
----------------------------------------------------------
Keshvi | India | New | Not applicable |
----------------------------------------------------------
No
----------------------------------------------------------
The third div causes the content to shift down. Any suggestions on how to resolve this issue?