header row template in ng-grid

Question

I have created an ng-grid and want to customise Header Row Template of the grid as i need to add total items in header instead of the footer, but want the same view as footer (i mean the whole row ). I already know about headerCellTemplate and also have already tried it but its not what i am looking for ! if you can help i will be so thankful to you :) here is sample of my code

$scope.myData = [{"name": "Moroni", "age": 50},
{"name": "Tiancum", "age": 53},
{"name": "Jacob", "age": 27},
{"name": "Nephi", "age": 54},
{"name": "Alex", "age": 53},
{"name": "Jhonny", "age": 22},
{"name": "Ben", "age": 11},
],
        $scope.gridOptions = { 
            data: 'myData', 
            columnDefs: [
                            { field: 'name', displayName: 'Candiate name' },
                            { field: 'age', displayName: 'Age', headerCellTemplate: myHeaderCellTemplate }
                        ]
        };

Do you mean you can't figure out the right css styling to make the header look like the footer? Or? Maybe a picture of what you are hoping to achieve would help. — lmyers
hi @lmyers thanks for responding what i actually want is to add a new row above the header (a full row ) containing some heading text in it, so is it possible to edit headerTemplate just as footerTemplate? — Baljeet Bhinder
You don't need to do that as part of the grid. Just add a div above the grid and put whatever you want in it. You can use the same styles as the footer does to make it match. — lmyers
i also did the same way you suggested @lmyers thanks allot :) — Baljeet Bhinder

lmyers lmyers · Accepted Answer · 2015-03-04T12:52:43

You don't need to do that as part of the grid. Just add a div above the grid and put whatever you want in it. You can use the same styles as the footer does to make it match.

header row template in ng-grid

1 Answers