数据网格-远程分组-.net控制器与Angular语言 - 自定义存储

Question

我正在尝试使用。net MVC, Angular实现带有远程分组和自定义存储的Devextreme数据网格。我的自定义存储的配置如下所示:

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);
}
});

返回的数据格式如下:

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

下面是网格的实现:

<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>  

我得到这个错误后加载网格:分组数据的结构无效。参见:http://js.devexpress.com/error/21_1/E1037

我在文档和支持中心问答部分找到的每个例子都是使用Web API服务，这不适合我的问题。另外，当我分析这里的例子https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RemoteGrouping/Angular/Light/时，我看到了当我在网格上滚动时，FE会触发3个不同的调用。为什么?我也搜索了所有的支持中心，但我无法找到关于我的问题的答案。

你能帮我解决我的问题吗?能否与我分享使用上述技术实现数据网格分组的例子?谢谢你！

Answer 1

上面的例子的问题是从服务器返回的模型。

解决方案是像这样改变模型:

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