CODEWITHSUNDEEP
angularjsng-grid
tama
tama

Reputation: 335

ng-grid Show Two Arrow Sorting Icon for Every Column Header

In ng-grid, there are two arrow icons for sorting, but it is not showing all arrows in every column header by default.
I know about setting sortInfo, but I don't want to sort when the ng-grid first initializes.

How can I show the two arrows for every column header without triggering the sorting?

--Edited--

For those requesting some code: My gridOptions are standard.
I don't know what other code I should provide to you.

$scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter: true,
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        multiSelect: false,
        enableHighlighting: true,
        sortInfo: { fields: [], columns: [], directions: [] },
        columnDefs: [
            {field: 'name', displayName: 'Company'},
            {field: 'meta.orders', displayName: 'Orders'},
            {field: 'meta.expenses', displayName: 'Expenses', cellFilter: 'currency: \'IDR \''},
            {field: 'meta.commissions', displayName: 'Commisions', cellFilter: 'currency: \'IDR \''},
            {field: 'status', displayName: 'Status'},
            {field: '', cellTemplate: '<a ng-click="details(row)" class="btn btn-link" id="{{row.entity._id}}">Details</a>'}
        ]
    };

I want to achieve something like this (see the two arrows appear) when the ng-grid is first initialized, without triggering the sort:

I want to achieve like this when the ng-grid first initialized. And without triggering the sort

Upvotes: 4

Views: 2435

Answers (1)

tama
tama

Reputation: 335

I've already solved it.

I got the code below from the ng-grid template docs. 

var customHeaderCellTemplate = '<div ng-click="col.sort()" ng-class="{ ngSorted: !noSortVisible }">'+
'<span class="ngHeaderText">{{col.displayName}}</span>'+
'<div class="ngSortButtonDown" ng-show="showSortUp(col)"></div>'+
'<div class="ngSortButtonUp" ng-show="showSortDown(col)"></div>'+
'</div>'+
'<div ng-show="col.allowResize" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';

I modified it with my custom scope in the ng-show="showSortUp(col)" and ng-show="showSortDown(col)".

Then i put the showSortUp(col) and showSortDown(col) scope function in my controller.
The col params give us the info about the header column including sorting direction.
From the ng-grid source code, the showing arrows are controlled by sortDirection variable. In col params, we can get the sortDirection variable so we can use it to modify the original behaviour.

$scope.showSortUp = function(col) {
    if(col.sortDirection == 'asc') {
        return true;
    } else if(col.sortDirection == 'desc') {
        return false;
    } else {
        return true;
    }
}


$scope.showSortDown = function(col) {
    if(col.sortDirection == 'desc') {
        return true;
    } else if(col.sortDirection == 'asc') {
        return false;
    } else {
        return true;
    }
}

Also, you need to modify the .ngSortButtonUp and .ngSortButtonDown css because the original styles are broken when you show both arrows together.

Upvotes: 1

Related Questions