Tabbar, Menu and Toolbar - setRTL(true); breaks them.

Hi,

I’m trying to integrate dhtmlxTabbar, dhtmlxMenu and dhtmlxToolbar in a business management application with some features like multi-language support and accesibility but I have a problem with right-to-left input languages.

I initialize any dhtmlx component properly and assign values and node entries, so I have my menus, toolbars and tabbars working but the precise moment I activate the RTL mode, the toolbar dissapears as in showing just the

container and nothing more, and the same goes for the menu and the tabbar.

I have read previous forum posts and you answered it’s because setRTL is only available in the PRO version. I have to state I’m using the ‘free’ version, but still… I find it weird for the function not to work.

This is how the interface looks on LTR mode (by default):

And this is how it ends looking like when I use .setRTL(true):

This is the code I’m using. The menu is dm1, the toolbar tb1 and the tabbar tab1.

[code]var dm1 = new dhtmlXMenuObject(“dm1”);
dm1.setOpenMode(“web”);
dm1.setRTL(true);
dm1.addNewChild(null, 0, “clientes”, “Clientes”, false);
dm1.addNewChild(“clientes”, 1, “clientes-listado”, “Listado de clientes”, false);
dm1.addNewSeparator(“clientes-listado”, “s”);
dm1.addNewChild(“clientes”, 3, “clientes-facturas”, “பட்டியல்கள்”, false, “2panel.png”);
dm1.addNewChild(“clientes”, 4, “clientes-pedidos”, “Pedidos”, false);
dm1.addNewSeparator(“clientes”, “s”);
dm1.addNewChild(null, 6, “proveedores”, “Proveedores”, false);
dm1.addNewChild(“proveedores”, 7, “proveedores-listado”, “Κατάλογος των προμηθευτών”, false);
dm1.addNewSeparator(“proveedores-listado”, “s”);
dm1.addNewChild(“proveedores”, 9, “proveedores-pedidos”, “ბრძანებები”, false);
dm1.addNewSeparator(“proveedores”, “s”);
dm1.addNewChild(null, 11, “ayuda”, “לסייע למערכת”, false, “hdd.png”);

var tb1 = new dhtmlXToolbarObject(“tb1”);
tb1.setRTL(true);
tb1.addButton(“new”, 0, “جدید”, “hdd.png”);
tb1.addSeparator(“new”, 1);
tb1.addButton(“open”, 2, “جدید”, “yes.png”);
tb1.addSeparator(“open”, 3);
tb1.addButton(“import”, 4, “واردات”, “trashcan-full.png”);
tb1.addButton(“export”, 5, “واردات”, “keyboard.png”);
tb1.addSeparator(“import”, 6);
tb1.addButton(“help”, 7, “کمک”, “opciones-archivo.png”);

var tab1 = new dhtmlXTabBar(“tab1”, “top”);
tab1.setSize(800, 250);
tab1.setSkin(‘dhx_skyblue’);
tab1.setImagePath(“assets/plugins/dhtmlx/tabbar/imgs”);
tab1.preventIECashing(true);
tab1.enableAutoReSize(false);
tab1.enableForceHiding(true);
tab1.setRTL(true);
tab1.addTab(“t1”, “전자 팩스 도구”, 150);
tab1.addTab(“t2”, “アーモンド”, 150);
tab1.addTab(“t3”, “האַמער”, 150);
tab1.addTab(“t4”, “σκανδάλη”, 150);
tab1._tabs[‘t4’].title = ‘holo!’;
tab1.enableTabCloseButton(true);
tab1.addTab(“t5”, “hola, mundo!”, 150);
tab1._tabs[‘t5’].title = ‘αυτό είναι ένα δοκιμαστικό κείμενο!’;
tab1.enableTabCloseButton(false);
tab1.setContent(“t1”, “t1”);
tab1.setContent(“t2”, “t2”);
tab1.setContent(“t3”, “t3”);
tab1.setContent(“t4”, “t4”);
tab1.setContent(“t5”, “t5”);
tab1.setTabActive(“t4”);[/code]

Am I doing something wrong? Am I missing some more functions or is it just the lack of the features present in the PRO version?

Thanks in advance,
Julio

Another effect I’ve been observing is… if I have more than one dhtmlx component using the setRTL(true) function, every component after the first one using the RTL directive dissapears (as seen on the photo).

If I delete the menu, the toolbar appears, and if I delete the toolbar, the tabbar appears.

Ok, I found a mistake I was making… I need to call setRTL(true) once I’ve created all the element contents, so it’s the last function you call before your events.

Apart from that, I was optimizing the code too much, putting all javascript code for all componentes together in just one block, which didn’t turn out good.

Still… even when calling setRTL(true); , menu, toolbar and tabbar elements continue being rendered in a left-to-right fashion.

Hi
If you have active support subscribtion, please create a ticket in the online support system and attach completed demo there.
docs.dhtmlx.com/doku.php?id=othe … leted_demo