How to achive Raw Heading and Column Heading both in AngularJS using ng grid

Question

How to achieve below using ng-grid.

Team         GP   W   L   T   OL  GF  GA   Pts
x-Boston     79  40  18  14   7  201  179  101
x-Toronto    80  43  24  10   3  234  204   99
x-Ottawa     79  41  22  10   6  254  178   98
x-Montreal   79  40  28   7   4  201  182   91
Buffalo      79  36  32   7   4  213  210   83

So all Teams are in bold as well as GP W L T OL GF GA Pts are also a bold. As these all are headings.

Below is json source of above information.

$scope.myData = [{ team:"x-boston", gp: 79, w: 40, l: 18, t:14, ol:7, gf:201 ,ga:179 ,pts:'101' },{ team:"x-toronto", gp: 80, w: 43, l: 24, t:10, ol:3, gf:234 ,ga:204 ,pts:'99' }, ........... ]; });

i refer http://angular-ui.github.io/ng-grid/ but not finding solution to what i want to do.

Answer 1

Got this working by using a combination of rowTemplate and headerClass in columndefs:

    app.controller('MyCtrl', function ($scope) {
        $scope.myData = [
            {
                team: "x-boston", gp: 79, w: 40, l: 18, t: 14, ol: 7, gf: 201, ga: 179, pts: '101'
            },
            {
                team: "x-toronto", gp: 80, w: 43, l: 24, t: 10, ol: 3, gf: 234, ga: 204, pts: '99'
            }
        ];

        var rowTemplate = '<div style="height: 100%"><div ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}">' +
            '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last}">&nbsp;</div>' +
            '<div ng-class="{bold: $first }" ng-cell></div></div></div>';

        $scope.gridOptions = {
            data: 'myData',
            rowTemplate: rowTemplate,

            columnDefs: [
                {
                    field: 'team',
                    width: 90,
                    headerClass: 'bold'
                },
                {
                    field: 'gp'
                },
                {
                    field: 'l'
                },
                {
                    field: 't'
                },
                {
                    field: 'ol'
                },
                {
                    field: 'gf'
                },
                {
                    field: 'ga'
                },
                {
                    field: 'w'
                },
                {
                    field: 'pts',
                    headerClass: 'bold'
                }
            ]
        }
    });

Here is a Plunker

Note how <div ng-class="{bold: $first }" in the rowTemplate adds the bold class to the first collumn. In Columdefs the most easiest way is to use a headerClass.

You can modify the css in style.css.

If you really want the first 2 letters of x-teams in another style you could add a cell template too, apply a filter that wraps the first 2 letters in a span and then render the cellText as html. If you want to know how to do this add a new question or this is getting far too long.