Header grouping of UI Grid Angular

Question

I want to change my header rendering of UI-Grid AngularJS. I know it is easy to implement by just make headerTemplate but i have a situation where i need to make the grouping of headers like this

{
        name: 'Mapped By',
        enableColumnMenu: false,
        field: 'Mappedby',
        cellClass: 'intrighttextcell',
        width: 102,
        enableCellEdit: false,
        allowCellFocus: false
    },

I don't know how can i achieve this functionality in ui-grid. Here is the plunkr of ui-grid.

gofr1 · Accepted Answer · 2016-09-28 14:57:36Z

We have same kind of requirement but did'nt find any proper solution for it, so I achieved it by using some hacky way using headerCellTemplate.

See jsfiddler below or here.

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
    }
]
}
}]);

</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;
}

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

Use headerCellTemplate is great, but how can I remain other functions, like sort?

Malik Zahid · Accepted Answer · 2019-05-28 07:53:09Z

// Code goes here

angular.module("temp2", ["ui.grid"]).controller("Temp2Controller", [ "uiGridConstants", Temp2Controller ]);

function Temp2Controller(uiGridConstants) {
  "use strict";
  var $scope = this;
  
  $scope.gridOptions = {
      headerTemplate: '<div class="ui-grid-header custom-ui-grid-header"><div class="ui-grid-top-panel"><div class="ui-grid-header-viewport"><div class="ui-grid-header-canvas" style=""><div class="ui-grid-header-cell-wrapper" style="display: block;" ng-style="colContainer.headerCellWrapperStyle()"><div class="ui-grid-header-cell-row abc" style="display: block; border-bottom: 1px solid;border-bottom-color: #d4d4d4;"><div class="ui-grid-header-cell" ng-repeat="superCol in grid.options.superColDefs track by $index" col-name="{{superCol.name}}"><div class="ui-grid-cell-contents" data-ng-bind="superCol.displayName"></div></div></div><div class="ui-grid-header-cell-row"><div class="ui-grid-header-cell ui-grid-clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell col="col" super-col-width-update render-index="$index"></div></div></div></div></div></div></div>',
      superColDefs: [{
          name: 'group1',
          displayName: 'Group 1'
      }, {
          name: 'group2',
          displayName: 'Group 2'
      }],
      columnDefs: [{
          name: 'name',
          displayName: 'Name',
          superCol: 'group1'
      }, {
          name: 'title',
          displayName: 'Title',
          superCol: 'group1'
      }, {
          name: 'age',
          displayName: 'Age',
          superCol: 'group2'
      }],
      data: [{
          name: 'Bob',
          title: 'CEO',
          age: '31'
      }, {
          name: 'Frank',
          title: 'Lowly Developer',
          age: '33'
      }]
  };  


}


(function() {
  "use strict";
  angular.module("temp2").directive('superColWidthUpdate', ['$timeout', function ($timeout) {
    return {
      'restrict': 'A',
          'link': function (scope, element) {
          var _colId = scope.col.colDef.superCol,
              _el = jQuery(element);
          _el.on('resize', function () {
              _updateSuperColWidth();
          });
          var _updateSuperColWidth = function () {
              $timeout(function () {
                  var _parentCol = jQuery('.ui-grid-header-cell[col-name="' + _colId + '"]');
                  var _parentWidth = _parentCol.outerWidth(),
                      _width = _el.outerWidth();
                  
                  if (_parentWidth + 1 >= _width) {
                    _parentWidth = _parentWidth + _width;
                  } else {
                    _parentWidth = _width;
                  }
                  
                  _parentCol.css({
                      'min-width': _parentWidth + 'px',
                      'max-width': _parentWidth + 'px',
                      'text-align': "center"
                  });
              }, 0);
          };
          _updateSuperColWidth();
      }
    };
  }]);
  
  
  
  
  
})();

<!DOCTYPE html>
<html ng-app="temp2" ng-controller="Temp2Controller as temp2">

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css">
    <script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.js"></script>
    <script src="script.js"></script>
    <script src="super-col-with-update.js"></script>
    
    <style>
      /* Styles go here */
      .grid {
        width: 700px;
      }
    </style>
  </head>

  <body>
    <div id="grid" ui-grid="temp2.gridOptions" class="grid"></div>
  </body>

</html>

See jsfiddler here.. It will help you in header grouping.

vvardhanz · Accepted Answer · 2015-08-14 00:26:09Z

0

This is a open issue in GitHub #963 https://github.com/angular-ui/ui-grid/issues/963. Its been pending since Aug 2013. Check this issue #644 https://github.com/angular-ui/ui-grid/issues/644. They have mentioned some alternative ways.

answered Aug 14, 2015 at 0:26

vvardhanz

6571 gold badge4 silver badges7 bronze badges

Collectives™ on Stack Overflow

Header grouping of UI Grid Angular

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related