Devexpress dxDataGrids不使用引导选项卡

我刚刚将DevExtreme从17.1.4更新到20.2.7。几乎一切都很好。但是，dxDataGrids现在有一个引导选项卡问题，这是以前没有的。。我有6个bs标签；每个网格中有一个网格。以前从未出现过问题，但现在只有最初处于活动状态的选项卡显示数据，而移动到另一个选项卡则显示空网格。。甚至连列名都没有

我所尝试的：

使用引导选项卡事件确定哪个选项卡处于活动状态，然后刷新网格（丑恶黑客）：

这类作品。。但它有以下三个问题：

每次我更改选项卡时都必须从服务器获取数据

不显示任何网格的任何列名（加载页面时第一个列名除外）

由于某种原因，第一列现在非常宽，网格根本没有响应。。除了加载页面时显示的第一个

我还尝试调用了

updateDimensions（）

。。但这没有任何区别：

$(window).on('shown.bs.tab', function () {
    var tab = $(event.target).text();
    switch (tab) {
        case "Example1":
            $("#grid-example1").dxDataGrid("instance").refresh();
            $("#grid-example1").dxDataGrid("instance").updateDimensions();
            break;
        case "Example2":
            $("#grid-example2").dxDataGrid("instance").refresh();
            $("#grid-example2").dxDataGrid("instance").updateDimensions();
            break;
        case "Example3":
            $("#grid-example3").dxDataGrid("instance").refresh();
            $("#grid-example3").dxDataGrid("instance").updateDimensions();
            break;
        case "Example4":
            $("#grid-example4").dxDataGrid("instance").refresh();
            $("#grid-example4").dxDataGrid("instance").updateDimensions();
            break;
        case "Example5":
            $("#grid-example5").dxDataGrid("instance").refresh();
            $("#grid-example5").dxDataGrid("instance").updateDimensions();
            break;
        case "Example6":
            $("#grid-example6").dxDataGrid("instance").refresh();
            $("#grid-example6").dxDataGrid("instance").updateDimensions();
            break;
        default: break;
    }
});

请告诉我如何解决这个问题

---

编辑：如果这里有一些误解，问题似乎是新版本在一个不可见的容器中初始化时出现了问题，而旧版本工作得非常好。这就是为什么我尝试在

show.bs.tab

事件中刷新网格，但正如我前面提到的那样，这没有帮助。

您预期的行为是什么？当页面加载所有网格请求数据时？@FilipeNóbrega已经一次加载所有网格。。但问题是，即使数据在那里（我可以看到它被请求了），网格本身也没有显示任何内容，甚至连列名都没有。在一个不可见的容器中初始化它们似乎有问题。。。考虑到旧版本运行良好，这很奇怪。

$(window).on('shown.bs.tab', function () {
    var tab = $(event.target).text();
    switch (tab) {
        case "Example1":
            $("#grid-example1").dxDataGrid("instance").refresh();
            $("#grid-example1").dxDataGrid("instance").updateDimensions();
            break;
        case "Example2":
            $("#grid-example2").dxDataGrid("instance").refresh();
            $("#grid-example2").dxDataGrid("instance").updateDimensions();
            break;
        case "Example3":
            $("#grid-example3").dxDataGrid("instance").refresh();
            $("#grid-example3").dxDataGrid("instance").updateDimensions();
            break;
        case "Example4":
            $("#grid-example4").dxDataGrid("instance").refresh();
            $("#grid-example4").dxDataGrid("instance").updateDimensions();
            break;
        case "Example5":
            $("#grid-example5").dxDataGrid("instance").refresh();
            $("#grid-example5").dxDataGrid("instance").updateDimensions();
            break;
        case "Example6":
            $("#grid-example6").dxDataGrid("instance").refresh();
            $("#grid-example6").dxDataGrid("instance").updateDimensions();
            break;
        default: break;
    }
});