ag-grid Tree Data stay loading until data recibed

Question

I'm trying to create a tree view of data in server side, my data come from server with this structure:

IdObjectA: 1
NameObjectA: "NameA"
ObjectB: [{
    IdObjectB: 1
    NameObjectB: "NameB"
    ObjectC: [{
        IdObjectC: 1
        NameObjectC: "NameC"
        Data: [
            {
             ...  
            }
        ]
    }]
}]

I use ajax to get the response and if I debug, the data comes sucesfuly:

function createServerSideDatasource() {
        return {
            rowCount: undefined,
            getRows: (params) => {
                const response = $.ajax({
                    type: "POST",
                    url: "/Controller/GetAllDataFromDatabase",
                    data: { filterElementsToDatabase },
                    success: function (data) {
                        /*Get the data OK*/
                        var rowsData = JSON.parse(data);
                        params.successCallback(rowsData);
                    },
                    error: function (e, ts, et) {
                        params.fail();
                    }
                });
                
            }
        };
    }

The columDefs are:

const columnDefs = [
    {
        headerName: 'ObjectB',
        children: [
            {
                field: 'ObjectB.IdObjectB',
                headerName: "IdObjectB",
                hide: true
            },
            {                
                field: "ObjectB.NameObjectB",
                headerName: "NameObjectB"
            },
            {
                headerName: 'ObjectC',
                children: [
                    {
                        field: 'ObjectB.ObjectC.IdObjectC',
                        headerName: "IdObjectC"
                    },
                    {
                        field: "ObjectB.ObjectC.NameC",
                        headerName: "NameC",
                    },
                    {
                        headerName: 'Data',
                        children: [                           
                            { field: 'ObjectB.ObjectC.Data.Param1', sortable: true, headerName: "Param1" },
                            { field: 'ObjectB.ObjectC.Data.Param2', sortable: true, headerName: "Param2" },
                            { field: 'ObjectB.ObjectC.Data.Param3', sortable: true, headerName: "Param3" },
                           
                        ]
                    }
                ]
            }
        ]
    }
];

and the grid options are:

gridOptions = {
rowModelType: 'serverSide',
serverSideInfiniteScroll: true,
treeData: true,
cacheBlockSize: 100,
cacheOverflowSize: 15,
maxConcurrentDatasourceRequests: 1,
infiniteInitialRowCount: 100,
maxBlocksInCache: 10,
columnDefs: columnDefs,
defaultColDef: {
    sortable: true,
    resizable: true,
    filter: true,
    enableFilter: true,
    floatingFilter: true,
    enableValue: true,
    enableRowGroup: true,
    width: 200,
},
groupHeaderHeight: 0,
suppressDragLeaveHidesColumns: true,
sideBar: {
    toolPanels: [
        {
            id: 'columns',
            labelDefault: 'Columns',
            labelKey: 'columns',
            iconKey: 'columns',
            toolPanel: 'agColumnsToolPanel',
            toolPanelParams: {
                suppressSyncLayoutWithGrid: true,
                suppressColumnMove: true,
            },
        },
    ],
    defaultToolPanel: 'columns',
},
enableCharts: true,
enableRangeSelection: true,
autoGroupColumnDef: {
    field: 'Lineas.IdCelula',
},
isServerSideGroup: (dataItem) => {
    debugger;
    // indicate if node is a group
    var group = !!dataItem.ObjectC
    return group;
},
getServerSideGroupKey: (dataItem) => {
    debugger;
    // specify which group key to use
    return dataItem.ObjectB.ObjectC.NameC;
},

};

But when load this happen and in console don't apear exceptions or warnings about, and stay with the spinner of loading in all rows.

Answer 1

Find the problem, was in the server object, was with multiple elements inside like:

IdObjectA: 1
NameObjectA: "NameA"
ObjectB: [{ //<-- Array
    IdObjectB: 1
    NameObjectB: "NameB"
    ObjectC: [{ //<-- Other Array
        IdObjectC: 1
        NameObjectC: "NameC"
        Data: [ //<-- Other Array
            {
             ...  
            }
        ]
    }]
}]

But, you can't have a multidimensional object with arrays inside , you have to create an array of objects like:

{
    IdObjectA: 1
    NameObjectA: "NameA"
    ObjectB: {
        IdObjectB: 1
        NameObjectB: "NameB"
        ObjectC: {
            IdObjectC: 1
            NameObjectC: "NameC"
            Data:
            {
             ...
            }
        }
    }
},
{
    IdObjectA: 1
    NameObjectA: "NameA"
    ObjectB: {
        IdObjectB: 1
        NameObjectB: "NameB"
        ObjectC: {
            IdObjectC: 2
            NameObjectC: "NameC"
            Data:
            {
             ...
            }
        }
    }
}

Then ag-grid recieve the data and load correctly the table.