CODEWITHSUNDEEP
angularjssortingtypescriptangular-ui-gridui-grid
TBogdan
TBogdan

Reputation: 737

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

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.

Upvotes: 1

Views: 3748

Answers (1)

S. Baggy
S. Baggy

Reputation: 958

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.

Upvotes: 2

Related Questions