【wijmo.react.all 5.20202.732】ODataVirtualCollectionView 横向滚动报错
我们在使用ODataVirtualCollectionView这个组件时遇到一个问题：我们有一个表，有很多列，大概有20列左右，当页面宽度较小时，横向滚动到靠后的列时，就会报错。
报错截图：
vendors~index.50a9cc17.chunk.js:2 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at Es (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1870183)
at Du (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1889297)
at t.unstable_runWithPriority (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1910383)
at Go (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1835081)
at Iu (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1887196)
at Ou (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1877494)
at mu (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1874038)
at oc (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1902078)
at lc (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1902941)
at https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1905454
at _u (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1877645)
at Object.unmountComponentAtNode (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:1905439)
at DirectiveCellFactory.disposeTemplate (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:486:2445)
at DirectiveCellFactoryBase.doDisposeCell (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:467:7977)
at DirectiveCellFactoryBase._doDisposeCell (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:467:8173)
at DirectiveCellFactoryBase.disposeCell (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:467:6584)
at GridPanel._removeExtraCells (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:25132)
at GridPanel._renderColHdrRow (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:19962)
at GridPanel._updateContent (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:17448)
at FlexGrid._updateContent (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:127481)
at HTMLDivElement.<anonymous> (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/grapecity~index.a4e746b6.chunk.js:398:71944)
at HTMLDivElement.i (https://azurestaticresource.jianguoyun.net.cn/task/assets/js/vendors~index.50a9cc17.chunk.js:2:442378)
从堆栈中看出来，应该是FlexGrid在做列回收时出现了问题。
我们应该怎么解决这个问题呢？
问题已经收到，从你描述的情况来看可能是FLEXGIRD控件中存在bug，您那边有没有可能提供一个可以重现问题的简单demo？ 我需要先重现问题， Richard.Ma 发表于 2021-6-28 16:41
问题已经收到，从你描述的情况来看可能是FLEXGIRD控件中存在bug，您那边有没有可能提供一个可以重现问题的 ...
这个因为demo里边，没办法修改odata协议的数据源，所以可能不太好写demo，复现步骤的话其实只要使用 odata 虚拟列表那个组件，然后渲染比较多的列，然后调小窗口宽度，再横向滚动到最后一列应该就能复现。 好的，我这边验证后给您回复 本帖最后由 nutstore 于 2021-7-1 20:40 编辑
我们尝试更新到最新版本之后，这个问题好像复现不出来了。
哦我话说早了... 还是能复现，就是场景不一样了:dizzy:
嗯，这两天我也用下面的地址中的Northwind>>Invoice测试了一下，也没有重现问题
https://pragmatiqa.com/xodata/
下次如果您这边有关于odata的问题的话，也可以用这种公开的数据源来测试一下，咱们两边也好同步测试结果 本帖最后由 nutstore 于 2021-9-23 11:39 编辑
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './app.css';
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as wjcCore from "@grapecity/wijmo";
import * as wjcGrid from "@grapecity/wijmo.grid";
import * as wjcOData from "@grapecity/wijmo.odata";
import * as wjGrid from '@grapecity/wijmo.react.grid';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
orderDetails: new wjcOData.ODataCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Order_Details_Extendeds"),
virtualOrderDetails: new wjcOData.ODataVirtualCollectionView("https://services.odata.org/Northwind/Northwind.svc", "Order_Details_Extendeds", {
loaded: (sender, e) => {
this.setState({
totalItemCount: wjcCore.format("{totalItemCount:n0} items", sender)
});
}
}),
itemCount: "",
totalItemCount: "",
isEmpty: false,
};
setTimeout(() => {
this.setState({
isEmpty: true
})
}, 3000)
}
render() {
return <div className="container-fluid">
<div className="col-sm-6">
<h4>ODataCollectionView</h4>
<p>{this.state.itemCount}</p>
<wjGrid.FlexGrid itemsSource={this.state.orderDetails} isReadOnly={true} initialized={this.gridInitialized.bind(this)}>
</wjGrid.FlexGrid>
</div>
<div className="col-sm-6">
<h4>ODataVirtualCollectionView</h4>
<p>{this.state.totalItemCount}</p>
{this.state.isEmpty ? null : (
<wjGrid.FlexGrid itemsSource={this.state.virtualOrderDetails} isReadOnly={true} initialized={this.virtualGridInitialized.bind(this)}>
</wjGrid.FlexGrid>
)}
</div>
</div>;
}
gridInitialized(flexgrid) {
flexgrid.formatItem.addHandler((s, e) => {
// show row indices in row headers
if (e.panel.cellType == wjcGrid.CellType.RowHeader) {
e.cell.textContent = (e.row + 1).toString();
}
});
flexgrid.loadedRows.addHandler((sender, e) => {
this.setState({
itemCount: wjcCore.format("{length:n0} items", sender.rows)
});
});
}
virtualGridInitialized(flexgrid) {
flexgrid.formatItem.addHandler((s, e) => {
// show row indices in row headers
if (e.panel.cellType == wjcGrid.CellType.RowHeader) {
e.cell.textContent = (e.row + 1).toString();
}
});
flexgrid.scrollPositionChanged.addHandler(() => {
let rng = flexgrid.viewRange;
this.state.virtualOrderDetails.setWindow(rng.row, rng.row2);
});
}
}
ReactDOM.render(<App />, document.getElementById('app'));
收到 抱歉忘记给您回复了，您这边提供的代码修改后无法运行起来，我把这个原始的demo打包了，你可以在这个基础上修改。我这边来重现问题
Richard.Ma 发表于 2021-9-23 10:23
抱歉忘记给您回复了，您这边提供的代码修改后无法运行起来，我把这个原始的demo打包了，你可以在这个基础上 ...
这个包下载下来，改了代码复现不了问题；上边的代码可能复制的时候出了问题，现在已经更新了，可以在demo上复现。
看起来是新版本里已经解决了这个问题？
页:
[1]
2