Angular UI-Grid - Spanning Column Headers [ hack ]

Angular UI-Grid - Spanning Column Headers over multiple columns

by Guruling Kumbhar

HTML

<div ng-app="app">
<div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid autoHeightUIGrid"></div>
    </div>
</div>
<script>
$(document).ready(function(){
   $(".ui-grid-spilt-header-main").css('padding-top', $(".ui-grid-header-table").height());
 });
</script>

CSS

</style> <!-- remove this, it is just for jsfiddle --> 
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 

<style>http://jsfiddle.net/user/dashboard/
.grid {
  width: 500px;
  /* height: 250px;*/
}

/* CSS to define autoHeight */
.autoHeightUIGrid,
.autoHeightUIGrid .ui-grid-viewport{
	height: auto !important;
}


.ui-grid-spilt-header-main{
	 /* padding-top: 75px; */ /* added top padding dynamically by Js */
  line-height: 30px;
	text-align: center;
}

.ui-grid-split-merge-header{
  border-left: 2px solid transparent;
	position: absolute;
	background: #f3f3f3;
	text-align: center;
	line-height: 30px;
	z-index: 1;
	top: 0px;
	left:0px;
}
.ui-grid-header-table{
  width:100%;
  padding:0px;
  border:none;
  border-spacing: 0px;
  border-collapse: collapse;
}
.ui-grid-header-table tr td{
  border-bottom:1px solid #ccc;
  border-right:1px solid #ccc;
}
.ui-grid-header-table tr td:last-child{
  border-right:none;
}

JavaScript

var app = angular.module('app', ['ngTouch', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', function ($scope) {

  $scope.gridOptions = {
    columnDefs: [
    	{
        name:'firstCol',
        headerCellTemplate: "<div class='ui-grid-spilt-header-main'><div class='ui-grid-split-merge-header' style='width:500%'><table class='ui-grid-header-table'><tbody><tr><td colspan='2'>Grand Parent Header</td></tr><tr><td width='60%''>Parent Header</td><td>Parent Header</td></tr</tbody></table></div>Child header1</div>"
      },
      {
      name:'secondCol',
      headerCellTemplate: "<div class='ui-grid-spilt-header-main'>Child header2</div>"
      },
      {name:'thirdCol',
      headerCellTemplate: "<div class='ui-grid-spilt-header-main'>Child header1</div>",
      },
      {name:'fourthCol',
      headerCellTemplate: "<div class='ui-grid-spilt-header-main'>Child header2</div>"
      },
      {name:'fifthCol',
      headerCellTemplate: "<div class='ui-grid-spilt-header-main'>Child header3</div>"
      }
    ],
			data: [
    {
        "firstCol": "Cox",
        "secondCol": "Carney",
        "thirdCol": "Enormo",
        "fourthCol": 'Radha',
        "fifthCol": true
    },
    {
        "firstCol": "Lorraine",
        "secondCol": "Wise",
        "thirdCol": "Comveyer",
        "fourthCol": 'Jassi',
        "fifthCol": false
    },
    {
        "firstCol": "Nancy",
        "secondCol": "Waters",
        "thirdCol": "Fuelton",
        "fourthCol": 'Lusi',
        "fifthCol": false
    }
]
}
}]);