Sorting in angular ui-grid by specific column other than default field value

Question

I have a table named Job:

name    nvarchar(50)
id  int
description nvarchar(50)
enabled bit
date_modified   datetime
user    nvarchar(50)

And the specific class:

public class Job {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public bool Enabled { get; set; }
    public DateTime DateModified { get; set; }
    public string User { get; set; }
}

I am using angular and typescript on my app and I have the following issue trying to display data:

I use the ui-grid from angular type of grid and I have the following column defs:

    columnDefs: [
        {
            field: 'id',
            defaultFilter: FilterOperator.EQU,
            sort: {

                direction: this.uiGridConstants.DESC,
                priority: 0,
            },
            type: 'number'
        },
        { field: 'name', defaultFilter: FilterOperator.LIKE, sort: null },
        { field: 'description', defaultFilter: FilterOperator.LIKE, sort: null },
        { field: 'enabled', filter: { type: 'select', selectOptions: [{ value: true, label: 'True' }, { value: false, label: 'False' }] } },
        { field: 'user', defaultFilter: FilterOperator.LIKE, sort: null },
        { field: 'date_modified', type: 'date', enableFiltering: false, sort: null, cellTemplate: '<div>{{row.entity.dateModified | date:\'dd/MM/yyyy hh:mm:ss\'}}</div>' },
        { field: 'action', enableFiltering: false, enableSorting: false, sort: null, cellTemplate: `${this.baseUrl}app/automaticAction/listActionsTemplate.html` }
    ]

My issue is that in order to sort the date modified column I need the field property value to be the database column (date_modified) but in order to display data I need to use the class property (dateModified). Is there a way to extend the column defs or something to specify the column I wish to sort upon? I am currently using an workaround with celltemplate but I don't like it.

S. Baggy · Accepted Answer · 2016-11-12 00:38:52Z

2

Yes, you can specify the sortingAlgorithm property in the columnDef...

{ field: 'DateModified', type: 'date', enableFiltering: false, sort: null, cellTemplate: '<div>{{row.entity.DateModified | date:\'dd/MM/yyyy hh:mm:ss\'}}</div>', sortingAlgorithm: SomeCommonServiceOfYours.getDateSortingAlgorithm() },

And then specify the algorithm in a service (or your scope) like this

getDateSortingAlgorithm: function () {
    return function (aDate, bDate) {
        var dateDisplayFormat = 'dd/MM/yyyy hh:mm:ss';
        var aMoment = moment(aDate, dateDisplayFormat);
        var bMoment = moment(bDate, dateDisplayFormat);
        if (aMoment.isBefore(bMoment)) {
            return -1;
        } else if (bMoment.isBefore(aMoment)) {
            return 1;
        } else {
            return 0;
        }
     }
},

This assumes you are using moment, a very nice package for all date and time handling, but if not, you can adapt that algorithm as required.

edited Nov 12, 2016 at 0:38

answered Jun 28, 2016 at 21:55

S. Baggy

95810 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Resley Rodrigues Over a year ago

Is it possible to do without writing the sorting algorithm? Something like { field: 'date.label', defaultFilter: FilterOperator.LIKE, sort: 'date.value; }?

S. Baggy Over a year ago

I'm not sure. I've stopped using angular-ui-grid as there were too many bugs and performance problems for my particular requirements.

Collectives™ on Stack Overflow

Sorting in angular ui-grid by specific column other than default field value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related