Sorting Master List Does NOT Keep Detail Below Master Row

[AYColumbia]

I was able to implement a master/detail list using the same approach as provided in the demo site/code. My master list, unlike the demo, has sortable columns. Works fine until I sort and then the detail view gets mucked up and is at the bottom or top depending on the sort direction.

Am wondering if anyone has implemented a similar feature as I have or if you have some suggestion as to how to fix so the detail stays "pinned" to its parent? Thank you for any help.

[AYColumbia]

I found what seems to be a solution but not rock solid yet. I noticed I'd only need this in descending so in my sortedRows useMemo/cached function, after the sort is done, I check if the direction is descending and basically swap out the detail row position with its master. So something like this seems to do the trick:

    let sorted = direction === appEnums.sortOrder.descending ? rows.reverse() : rows;
    if (direction === appEnums.sortOrder.descending)
    {
        const detailRows = rows.filter((r) => r.type === appEnums.viewType.detail);
        if (detailRows && detailRows.length)
        {
            detailRows.forEach((dr) =>
            {
                const dri = rows.indexOf(dr);
                if (dri > -1)
                {
                    const mr = rows.find((r) => r.type === appEnums.viewType.master && r.InvoiceNo === dr.InvoiceNo && r.TransactionDescription === dr.TransactionDescription);
                    if (mr)
                    {
                        const mri = rows.indexOf(mr);
                        rows[mri] = dr;
                        rows[dri] = mr;
                    }
                }
            });
        }
    }

My other issue, which is why this is not solid yet, is that the master row shifts its position when I expand the detail view when the master list is sorted in descending order why whatever column. Not sure yet what's going on there but the position reflects what's in the dataset and does NOT happen when ascending. Any helpful input on that would be appreciated. I hope the above helps someone else.

[AYColumbia]

I think I have this finally resolved. I did some more digging into the data grid guts in the demo and source code and did find a good approach with sorting use a getComparator function, I followed that pattern (found it in CommonFeatures.tsx under website\demos) and it seems to be working fine so far. I had to tune it a bit to support my columns and data types but so far so good. My sortedRows function now looks like this:

    const sortedRows = useMemo(() =>
    {
        if (gridData.length && sortColumns.length)
        {
            const { columnKey, direction } = sortColumns[0];
            setSortDirection(direction === appEnums.sortOrder.ascending ? appEnums.sortOrder.descending : appEnums.sortOrder.ascending);
            let sorted = [...gridData].sort((a, b) =>
            {
                for (const sort of sortColumns)
                {
                    const comparator = getComparator(sort.columnKey);
                    const compResult = comparator(a, b);
                    if (compResult !== 0)
                    {
                        return sort.direction === appEnums.sortOrder.ascending ? compResult : -compResult;
                    }
                }
                return 0;
            });
            return sorted;
        }
        // revert to defaul list sorted by InvoiceNo
        return gridData.sort((a, b) =>
        {
            const comparator = getComparator(dc.OpenInvoices.InvoiceNo.field);
            const compResult = comparator(a, b);
            if (compResult !== 0) { return compResult; }
            return 0;
        });
    }, [gridData, sortColumns]);

I hope this helps someone else who may be running into the same issue.

One thing I forgot to mention earlier that is important, when creating the detail row in the onRowsChange handler, make sure you're adding all the master columns that are sortable, e.g.,

        const row = rows[options.indexes[0]];
        if (row.type === appEnums.viewType.master)
        {
            if (row.expanded)
            {
                const rowId = row.RowId + rowIdCount;
                rows.splice(options.indexes[0] + 1, 0, {
                    // include all rows from master that are sortable to ensure detail stays "pinned"
                    // with the master when sorting master list
                    RowId: rowId,
                    TransactionDescription: row.TransactionDescription,
                    InvoiceNo: row.InvoiceNo,
                    IsEmailSent: row.IsEmailSent,
                    TransactionDate: row.TransactionDate,
                    DueDate: row.DueDate,
                    InvoiceBalance: row.InvoiceBalance,
                    DaysOld: row.DaysOld,
                    OrderNo: row.OrderNo,
                    type: appEnums.viewType.detail
                });
            }
            else
            {
                rows.splice(options.indexes[0] + 1, 1);
            }
            updateGridData(rows);
        }

In my example, updateGridData was created via useState.