Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jerzy Kosik
55
Sorting - empty cell on the end
posted

I'd like to use a default sorting feature but if cell is empty then  this row should be on the end. For example I have following values:

1. 'A'

2. 'Z'

3. 'C'

4. ' '

The order should be: 'A', 'C', 'Z', ' ' OR ' ', 'Z', 'C', 'A'. Now it is: ' ', 'A',  'C', 'Z', 'OR 'Z', 'C', 'A', ' '

I know that there is an customSortFunction option - but maybe is there a way to achieve my requirements without implementing the whole custom sorting feautre? I'm using a multisorting feature so it would be a bit complex to implement the whole feature.

Thaks for help!

Parents
No Data
Reply
  • 485
    Offline posted

    Hello Jerzy,

     

    Thank you for posting in our forum.

     

    You would avoid having to implement a global custom sorting function if you use a custom compare function instead, just for the column that contains the empty strings. This should work when you have multisorting.

    There is a StackOverflow thread which describes the same scenario that you have – if you get the snippet from there and use it in your application, the code would look like this:

     

    Define the custom compare function first, so the grid would be able to use it later:  

    let customCompare = (a, b) => {
    if(a === "" || a === null) return 1;
    if(b === "" || b === null) return -1;
    if(a === b) return 0;
    return a < b ? -1 : 1;
}

    Then, in your grid configuration: 

    $("#grid").igGrid({
    dataSource: data,
    primaryKey: "ProductID",
    autoCommit: true,
    columns: [   
            { headerText: "Product Category", key: "ProductCategory", dataType: "string", width: "25%" },
   ///     ...some column definitions...
    ],
    features: [
        {
            name: 'Sorting',
            mode: "multi",
            columnSettings: [
                {
                    columnKey: "ProductCategory",
                    compareFunc: customCompare
                }
            ]
        }
    ]
})
     

     

    I have attached an isolated code sample that demonstrates this approach, which you may run on your side if you want to:

    igGridCustomComparer.zip

    Try sorting the Product Category column and the empty records are being placed at the very bottom of the grid. 

     

    Please let me know if you need any further assistance.

Children
No Data