datagridgroupingdevextremedevextreme-angular

Data Grid - Remote Grouping - .NET Controller with Angular - Custom Store


I am trying to implement a Devextreme Data Grid with Remote Grouping with a Custom Store using .NET MVC, Angular. The configuration of my custom store looks like this:

this.dataSource = new CustomStore({
    key:"id",
    load: (loadOptions: any) => {

        const gridHeaderModel: overviewGridModel = {
            skip: loadOptions.skip || 0,
            take: loadOptions.take || 20,
            sortDescending: loadOptions?.sort?.[0]?.desc ?? true,
            sortBy: loadOptions?.sort?.[0]?.selector ?? null,
            filters: new OverviewFilterGridModel()
        };
        return this.service.getData(gridHeaderModel);
    }
});

The data that is returned is in the following format:

"data": [
    {
        "id": 1,
        "employeeId": 11
    },
    {
        "id": 2,
        "employeeId": 22
    }
],
"totalCount": 2

Here is the implementation of the grid:

    <dx-data-grid
    #exampleGrid
    [dataSource]="dataSource"
    [allowColumnResizing]="true"
    [columns]="columns"
    [showRowLines]="true"
    [showColumnLines]="true"
    [showBorders]="true"
    [remoteOperations]="{ groupPaging: true }"
    > 
        <dxo-scrolling mode="virtual"></dxo-scrolling>
        <dxo-group-panel [visible]="false"></dxo-group-panel>
        <dxo-grouping [autoExpandAll]="true"></dxo-grouping>
        <dxo-filter-row [visible]="true" [showOperationChooser]="false"></dxo-filter-row>
    </dx-data-grid>  

I am getting this error after loading of the grid: E1037 - Invalid structure of grouped data. See: http://js.devexpress.com/error/21_1/E1037

Every example that i found out on the documentations and Support Center Q&A section was with using Web API Service which is not suitable for my problem. Also when i was analyzing the example here https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RemoteGrouping/Angular/Light/ i saw that the FE fires 3 different calls when i scroll on the grid. Why? Also i searched all Support Center but i wasn't able to find answers about my problem.

Can you help me about my problem? Can you share with me example of implementation of data grid with grouping with above technologies? Thank you!


Solution

  • The problem with the above example was the model that was returned from the server.

    Solution is to change the model like this:

    {
        "data": [
            {
                "key": "Blagojche",
                "items": [
                    {
                        "id": 1038,
                        "employeeId": 52,
                        "employeName": "Blagojche"
                    }
                ]
            },
            {
                "key": "Peter",
                "items": [
                    {
                        "id": 1025,
                        "employeeId": 53,
                        "employeName": "Peter"
                    }
                ]
            }
        ],
        "totalCount": 38
    }