Lions Den

The Code and Times of Hanan Schwartzberg

About Hanan | Hanan's CV | Contact Hanan

December 5, 2015

Row numbering for ui-grid in Angular JS

Filed under: AngularJS,JavaScript — Tags: , , , — Hanan Schwartzberg @ 9:46 pm

The Issue

You want to display row numbers in a ui-grid. The numbers should should stay sequential regardless of the sorting

The Solution

Add this column to the grid’s columnDefs

{ name: 'rowNum', displayName: 'Row Number', cellTemplate: 
'<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row) + 1}}</div>' }

November 12, 2015

Default sort for ui-grid in Angular JS

Filed under: AngularJS,JavaScript — Tags: , , , — Hanan Schwartzberg @ 6:12 am

The Issue

You want to use the internal sorting for an ui-grid, but want to have it sort by default by a specific column.

What didn’t work

Including

sortInfo: {fields:['Title'],directions:['asc']},

in the grid definition didn’t work because it requires using external sorting.

The Solution

The default sort order isn’t declared on the grid level. It’s declared in the definition of the column itself. For example:

columnDefs: [
    {
       field: 'Title', displayName: 'Title', width: 160,
       sort: { direction: uiGridConstants.ASC, priority: 1 }
    },
    {
       field: 'Description', displayName: 'Description', width: 160
    }
]

Home | Site Design | Banner Design | Code Den | Offsite Posts | Downloads | Photography | About Hanan | Hanan's CV | Contact Hanan
Copyright © 2009 Hanan Schwartzberg. All rights reserved.