Ng-grid: Sorting Ascending and Descending with Font-Awesome

    I wrote this little snippet for some requirements a while back but since it's so general and if it helps the project to have a quick template to grab it I think it would be much greater to share. Also I was just wanted to write out the documentation as I was learning Angularjs along with ng-grid for the first time during the time I wrote it. So it should be clear that the dependencies are Font-awesomeNg-grid and Angularjs for this snippet.

When I wrote this when I was using Angularjs v1.2.16 stable, font-awesome v4.1.0 both it should not be a problem moving forward but with Ng-grid I used v2.7. It may break with later version as I know a lot has or will change in the template. This snippet should work in all browser but I only tested for Chrome, FireFox, IE8 and greater.

My Code
$templateCache.put("headerCellTemplate.html",
    "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\"{ 'ngSorted': !noSortVisible }\">" +
    "    <div ng-click=\"col.sort($event); sortOrder = !sortOrder;\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\">"+
    "     <i ng-class=\"{true: 'fa-sort-asc', false: 'fa-sort-desc'}[sortOrder]\" class=\"fa fa-sort fa-fw\"></i>{{col.displayName}}"+
    "</div>" +
    "    <div class=\"ngSortPriority\">{{col.sortPriority}}</div>" +
    "    <div ng-class=\"{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }\" ng-click=\"togglePin(col)\" ng-show=\"col.pinnable\"></div>" +
    "</div>" +
    "<div ng-show=\"col.resizable\" class=\"ngHeaderGrip\" ng-click=\"col.gripClick($event)\" ng-mousedown=\"col.gripOnMouseDown($event)\"></div>");

I also have a version more suited for Ng-grid 3.0 on Gists where I removed the escape characters to be placed in a template.

Resources
ng-toggle
      ng-toggle in AngularJS | GeniusCarrier
      javascript - AngularJS toggle class using ng-class - Stack Overflow
      Change an element's CSS class with JavaScript - Stack Overflow

Sorting Server Side
      sql - Sorting on the server or on the client? - Stack Overflow
      Server-side paging+filtering+sorting for ng-grid with WebAPI - Stack Overflow
      ng-grid Server Side Sorting error · Issue #223 · angular-ui/ng-grid

Working Examples - I used 'sortInfo',
Plunker - Using 'ngGridEventSorted'
Plunker - Using 'gridOptions.ngGrid.config.sortInfo'
$watch vs $on - Google Groups

Popular posts from this blog

Updating Razor 2.0 to 3.0 with Asp.net MVC

EF: The database cannot be opened because it is version 782

HTML5 Audio doesn't Autoplay for Chrome on Android