two column with same grouping priority in ui-grid

Question

maybe the title of my question is not proper, please feel free to update my title.

my json data is like

    [
        { "AutoId": 2, "CustomerId": "1000AIRLIESST", "customerLastName": "John", "locationId": "2", "Address": "1000   AIRLIES ST Winnipeg " },
        { "AutoId": 2, "CustomerId": "1000AIRLIESST", "customerLastName": "John", "locationId": "186471", "Address": "1000 Airlies ST Winnipeg " },
        { "AutoId": 2, "CustomerId": "1000AIRLIESST", "customerLastName": "John", "locationId": "186752", "Address": "111   pineview rd ST Winnipeg " }
    ];

as you can see the autoId, customerId and lastname are same. I want to demonstrate this data in ui-grid like following picture. I want to common part of my data comes in main columns.

Answer 1

It is impossible to group two column with same grouping priority

groupPriorities should generally be sequential, if they're not then the next time getGrouping is called we'll renumber them to be sequential. Defaults to undefined.

so my solution is like a cheat. first I use the aggregation function (max) for second column (customerLastname). then I used a custom directive to manipulate data. you can see the result in plunker

The column definition of ui-grid

  $scope.gridOptions = {
        enableFiltering: true,
        treeRowHeaderAlwaysVisible: false,
        columnDefs: [
                 {
                     name: 'customerLastName',
                     displayName: 'Customer LastName',
                     width: 200,
                     treeAggregationType: uiGridGroupingConstants.aggregation.MAX,
                     cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'

                 },
                 {
                     name: 'Address',
                     width: 200,
                 },

                {
                    name: 'CustomerId',
                    grouping: { groupPriority: 0 },
                    sort: { priority: 0, direction: 'desc' },
                    width: 200,
                    cellTemplate: '<div><div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null ||' +
                        ' ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>'
                },
        ],
        data: 'Customers',
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        }

    }; 

please pay attention to fakemax directive which I used in the cellTemplate of customerLastName. the custom directive is so simple.

app.directive('fakemax', function () {
    return function(scope, iElement, iAttrs) {
        var value = iAttrs.val;
        value = value.replace("max:", "");
        iElement[0].innerHTML = value;
    }
});