Column headers can span over multiple columns enabling a hierarchical structure

[mportugal]

I want to display hierarchical column headers by the property "headerRowTemplate",but I don't know how can I do this, thanks a lot!

- @wolf1860

Original Discussion: https://github.com/angular-ui/ui-grid/issues/963

[hario...@gmail.com]

Is there any update for the col-span for the headers?

[gurulin...@gmail.com]

Hi, I didn't find any working best solution for it, so I was able to achieve it by some hacky way, by using headerCellTemplate.

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

==========================

.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;

}

JS

==============================

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

    }

]

}

}]);

I have created jsfiddle example of it - https://jsfiddle.net/guruling/rq0frupv/

Hoping that it will be help someone.

thanks.