dxDataGrids not working with Bootstrap tabs

Question

I just updated DevExtreme from 17.1.4 to 20.2.7. Almost everything is working fine. However, the dxDataGrids now have a problem with Bootstrap tabs that they didn't before.. I have 6 bs tabs; 1 grid in each. There was never an issue before, but now only the initially active tab shows data and moving to another tab shows an empty grid.. which doesn't even have column names.

What I've tried:

Using Bootstrap tab events to figure out which tab is active and then refresh the grid (ugly hack):

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

This sort of works.. but it has the following 3 issues:

1. Has to get data from server every time I change a tab..

2. Doesn't show any column names for any of the grids (except the first one when page loaded)

3. For some reason the first column is now very wide and the grids are not responsive at all.. except again the first one showing when page is loaded.

I tried calling updateDimensions() as well.. but that didn't make any difference:

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

Please tell me how I can solve this issue.

EDIT: In case there's some misunderstanding here, the problem appears to be that the new version appears to have an issue being initialized inside an invisible container, whereas the old one worked perfectly fine. That's why I tried refreshing the grids in the shown.bs.tab event, but that doesn't help, as I have mentioned above.

Answer 1

<li class="nav-item"> <a class="nav-link" style="font-size:12px" data-toggle="tab" href="#cmf_tab" role="tab" onclick="cmflistyenile()"><span class="hidden-sm-up">CMF</span> <span class="hidden-xs-down">CMF</span> </a> </li><script> function cmflistyenile({$("#CmfgridContainer").dxDataGrid("instance").refresh();setTimeout(insideupdate, 500);function icerikguncelle(){$("#CmfgridContainer").dxDataGrid("repaint");}

}

Answer 2

Sample Code:

$('a[data-toggle="tab"]').on("shown.bs.tab", function(e) {
    var $link = $(e.target)  
    var target = $link.attr("href"); // activated tab  
    $(target).find("#grid").dxDataGrid("instance").updateDimensions();  
});

Reference: https://supportcenter.devexpress.com/ticket/details/t625427/data-grid-is-rendered-incorrectly-inside-bootstrap-tabs/