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
Sorting - empty cell on the end

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!

  • 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: 

        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:

    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.