Grid Make detail grid in Master Detail sortable

Basic Building Blocks Series: Within the basic building blocks series over time I will add all the little things which someone who just starts with Serenity Framework would have to spend a lot of time figuring it out him/herself.

What you get with this article: As you may know, by default the detail grid of Serenity within a master-detail dialog is not sortable. A click on a column header does nothing.

After implementing this BBB, your detail grid is sortable like the normal grids.

Credits: All credits go to @BrunoBola and this issue: https://github.com/volkanceylan/Serenity/issues/3792

Implementation:

Within your xyzDetailEditor.ts, insert the following:

// *******************************************************************************************************************

        constructor(container: JQuery) {
            super(container);

            this.slickGrid.onSort.subscribe(function (e, args) {

                <yourNameSpace>.GridHelper.sortGridFunction((args.grid as Slick.Grid), args.sortCols[0], args.sortCols[0].sortCol.field);

                (args.grid as Slick.Grid).invalidateAllRows();
                (args.grid as Slick.Grid).invalidate();
                (args.grid as Slick.Grid).render();
                (args.grid as Slick.Grid).resizeCanvas();
            }.bind(this));
        }

        // *******************************************************************************************************************

        protected layout() {
            super.layout();

            var sortCols = this.slickGrid.getSortColumns();

            <yourNameSpace.GridHelper.sortGridFunction(this.slickGrid, sortCols[0], sortCols[0].columnId);
        }

        // *******************************************************************************************************************

        protected getDefaultSortBy() {
            //Columns to apply first sort on layout
            return ["<yourDefaultField_to_be_sorted_after>"];
        }

        // *******************************************************************************************************************

Create a new file ".GridHelper.ts" for the sortGridFunction like this:

namespace <yourNameSpace>.GridHelper {
    
    export function sortGridFunction(grid: Slick.Grid, column: any, field: any) {
        grid.getData().sort(function (a, b) {
            var result = a[field] > b[field] ? 1 :
                a[field] < b[field] ? -1 :
                    0;
            return column.sortAsc ? result : -result;
        });
    }
}

Please replace

• "<yourNameSpace>" with the name space of your project
• "<yourDefaultField_to_be_sorted_after>" with the field of the detail row after which the detail grid should be sorted initially

That's it, folks.

Thanks @BrunoBola for documenting this in your issue mentioned above.