Angular Ng-Grid HeaderRowTemplate sorting and two rows header

Question

I'm developping an app in angular 1.2.20 and using the ng-grid 2.0.11 and I'm having this problem :

when I'm using the headerRowTemplate attribut I loose the sort functionality of ng-grid. Is there a solution to keep it.

I have a second question, as seen in my first question I'm using the headerRowTemplate of ng-grid and I was wondering if anyone has succeeded in making a two rows header grid with or without the headerRowTemplate attribut.

Thanks in advance

Answer 1

I can't sure your real problem. Maybe you can give a Plunker link.

First, I suppose you don't modify from default template.

It's here. headerRowTemplate.html

Second, I suppose you need a display header row, and original sortable header row, I can't find it from ng-grid direct support, but this hack it's work.

It's a example:

main.js

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];

    $scope.headerRowHeight = 60;

    $scope.gridOptions = { 
        data: 'myData',
        headerRowTemplate: 'myHeaderTemplate.html',
        headerRowHeight: $scope.headerRowHeight,
        columnDefs: [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}]
    };
});

myHeaderTemplate.html

<div class="ngRow ngHeaderText" ng-style="{height: headerRowHeight / 2}" style="text-align:center">I'm other header row</div>
<div ng-style="{ height: col.headerRowHeight / 2, top: col.headerRowHeight / 2 }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell">
    <div class="ngVerticalBar" ng-style="{height: col.headerRowHeight / 2}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>
    <div ng-header-cell></div>
</div>

Plunker