Not show SUBGRID with NESTED DATA load async from ajax

[Oleg]

Hello. please advise me how to load data data asynchronously before unpacking expand ajax. In this report, as stated, nothing is displayed even when the data is loaded, the grid did not expand at all.
Thanks for advice. I don't want to carry the data forward with the main data because the detail view is used sporadically.

class DetailListKategoryReal extends DetailListKategory {

static get configurable() {

    return {
        editForm: editDetailOOPPReal,
        columns: getColumCategorX2(),
        store: {
            modelClass: RealCombineListOOPP,
        },
        selectionMode: {
            row: true,
            checkbox: {
                // These configs are applied to the checkbox selection column
                checkCls: 'b-my-checkbox'
            },
            showCheckAll: true
        },

        features: {
            rowExpander: {
                // The widget config declares what type of Widget will be created on each expand

                dataField: 'listArchRows',
                refreshOnRecordChange: true,
                widget: {
                    cls: 'timerow-grid', // CSS class added to the outer element
                    type: 'grid',
                    autoHeight: true,
                    columns: [
                        { field: 'id', text: 'ID' },
                        { field: 'dateArchive', text: 'dateArchive' },
                        // ostatné stĺpce...
                    ],

                },
                listeners: {
                    beforeExpand: function(events) { // This function will be called when a row is expanded
                        let record = events.record
                        console.log("record", record)
                        $.ajax({
                            type: "POST",
                            url: '/oopp/getRealCombineListOld', // Replace with your AJAX URL
                            data: {
                                recordId: record.data.id
                            },
                            dataType: "json",
                            success: function(data) {
                                // Update the record with the fetched data

                                record.data.listArchRows = data;
                                console.log(record, data)
                            },
                            error: function() {
                                // Handle error
                            }
                        });
                    }


                },


            },
        },
        excelExporterColl(grid) {
            grid.features.excelExporter.export({
                exporterConfig: {
                    columns: [
                        { text: 'Releaed', field: 'released', width: 90 },
                        { text: 'Datestart', field: 'datestart', width: 40 },
                        { text: 'picesname', field: 'picesname', width: 40 },
                        { text: 'textdesc', field: 'textdesc', width: 140 }
                    ]
                }
            })
        },
        newItem(grid, type, record) {

            let lparam = { grid: grid, type: type, record: record.data }
            console.log(lparam)
            if (type == "N") {
                getKategorListForChoose(lparam)
            } else {
                let dataMain = grid.mainData
                if (type == "C") {
                    dataMain = record
                    saveNewCopyRowReal(lparam)
                    return
                }
                this.editForm(type, dataMain, grid)
            }
        },
    }
}
}

[alex.l]

Hi Oleg,

Here is an example https://bryntum.com/products/gantt/docs/api/Grid/feature/RowExpander#async

new Grid({
   features : {
       rowExpander : {
           async renderer({record, region, expanderElement}){
               return fetchFromBackendAndRenderData(record);
           }
       }
   }
});

Should be that you want.