Comportamiento inesperado del componente Tabbar en dhtmlx: Recarga de datos al cambiar de pestaña

Hello everyone,

I’m experiencing unexpected behavior with the dhtmlx Tabbar component and wanted to discuss it here to gather more insights or possible solutions.

My scenario is as follows: I’m using the Tabbar component to organize multiple tabs in my application. The idea is that each tab contains specific data, and when switching between tabs, I expected the data to persist without needing to reload.

I’ve noticed that the code that worked perfectly in version 5 of dhtmlx no longer exhibits the same behavior in version 8. I’m attaching both code snippets to illustrate the difference:

Versión 5:

menu.attachEvent("onClick", function(id){
    var tabs = myTabbar.getAllTabs(); 
    var existe = ""; 
    var i;
    var opciones = id.split("|");
    if (opciones[1] == ""){ //Si opcion[1] viene en espacio es que es una carpeta con mas opciones
        return true;
    }
    for (i = 0; i < tabs.length; i++) {
        if (tabs[i] == opciones[0]){
            existe = opciones[0];
        }
    }
    if (existe == opciones[0]){
        myTabbar.tabs(opciones[0]).setActive();
    }else{
        myTabbar.addTab(opciones[0], opciones[1], null, null, true, true);
        myTabbar.tabs(opciones[0]).attachURL(opciones[2]);
        myTabbar.tabs(opciones[0]).setActive();
    }
    return true;
});

Versión 8:

menu.events.on("click", function (idopcion) {
    var data = idopcion.split("|");
    if (data[1] == ""){ //Si opcion[1] viene en espacio es que es una carpeta con mas opciones
        return true;
    }
    if (listado_tab.includes(idopcion)){
        tabbar.setActive(idopcion);
    }else{
        tabbar.addTab({id: idopcion, tab: data[1], html: "<iframe style='height:100%; width:100%; border:0px;' src='"+data[2]+"' />"}, -1);
        tabbar.setActive(idopcion);
        listado_tab.push(idopcion);
    }
    return true;
});

In version 8, I’ve noticed that data is being reloaded when switching tabs, unlike version 5. Has anyone else experienced this issue, or do you have any suggestions on how to address it? Is there any specific configuration that I might be overlooking?

I appreciate any guidance or experiences you can share on this matter.

Thanks in advance.

Unfortunately this is the expected behaviour in case of placing the external html to the dhx container due to the Virtual DOM structure. All the content not located at the viewport is clearing and re-rendering on showing in the viewport, so after the tab showing it renders the html stored in your config.
There is no possibility to change this behaviour.