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
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 }"> </div>
<div ng-header-cell></div>
</div>