angularjsng-gridheader-row

Angular Ng-Grid HeaderRowTemplate sorting and two rows header


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


Solution

  • 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