How to load the Toolbar dynamically

I am using Toolbar,I want to load the Parent and child Items in the toolbar dynamically from database.can u provide some sample code for loading the toolbar content dynamically.

Here is a sample of adding toolbar items dynamically: … cript.html

I’ve got a similar problem. I’d like to load parts of the toolbar (select button options) dynamically from server. Probably there is an ajax solution for this?

Best regards

Try the next approach:

toolbar = new dhtmlXToolbarObject("toolbarObj"); toolbar.setIconsPath("../___img/"); var newOpts = Array(Array('add_button1', 'obj', 'add_button1'), Array('add_button2', 'obj', 'add_button2'), Array('add_button3', 'obj', 'add_button3')); toolbar.addButtonSelect("add_buttons", 0, "add_buttons", newOpts, "new.gif", "new_dis.gif"); toolbar.addButton("b1", 1, "button 1", "_red.gif"); toolbar.addButton("b2", 1, "button 2", "_green.gif"); toolbar.addButton("b3", 1, "button 3", "_blue.gif"); toolbar.hideItem("b1"); toolbar.hideItem("b2"); toolbar.hideItem("b3"); toolbar.attachEvent("onClick", function(id){ if(id=="add_button1"){ toolbar.showItem("b1"); toolbar.hideItem("b2"); toolbar.hideItem("b3"); } if(id=="add_button2"){ toolbar.showItem("b2"); toolbar.hideItem("b1"); toolbar.hideItem("b3"); } if(id=="add_button3"){ toolbar.showItem("b3"); toolbar.hideItem("b1"); toolbar.hideItem("b2"); } });

Hello Darya,
sorry, but there’s a misunderstanding.
I’m looking for something like this:

getMoreButtons asks the server for new buttons (depending from various causes) and sends the new buttons (as XML or JASON) back and reloads the part below the clicked button.

Or is the only way to reload the whole toolbar?

Best regards


you can clearAll/reload using toolbar’s native functions

also as an option

toolbar.attachEvent("onClick", function(id){ if (id == "add_button1") { dhtmlxAjax.get("server.php?action=toolbarGetMoreButtons&...", function(r){ // assume response will in json, see ex. below var t = null; try { eval("t="+r.xmlDoc.responseText); } catch(e){}; if (t != null) { // add buttons manualy for (var q=0; q<t.length; q++) { toolbar.addButton(t[q].id, null, t[q].text, t[q].img); } } }) } });

response example

[ {id: "b_20", text: "button 20", img: "_magenta.gif"}, {id: "b_21", text: "button 21", img: "_cyan.gif"}, ... ]

Thanks to both of you. That will help.
Kind regards

Hello again,
so far, so good. But I need to add attributes and user data to the list items. How to do this manually?

I’ve tried something like this:

var pos = toolbar.getPosition(itemId);
  toolbar.forEachListOption(itemId, function(optionId){
        toolbar.removeListOption(itemId, optionId);

      var t = null;
      t = $.parseXML( r.xmlDoc.responseText );   // sorry for this, but it's all with XML
      $xml = $(t);
      if ($xml != null) {
          // add buttons manualy from XML
          $xml.find("item").each(function() {
              toolbar.addListOption(itemId, $(this).attr('id'), pos, 'button', $(this).attr('text'), $(this).attr('img'));
//****      toolbar.setAttribute( $(this).attr('id'), 'action', 'onClick' );
              toolbar.setUserData( $(this).attr('id'), 'action', $(this).attr('action'));

SetUserData seems to work, but how to set an attribute to the items attribute list? Or how to get access to the items of the options list?

Kind regards

More questions… setUserData doesn’t work neither.
I’ve tried both of these:

toolbar.setUserData( itemId, 'action', 'action_1');  // toolbar ID
toolbar.setUserData( optionId, 'action', 'action_2'); //listOption ID

But none of them comes back when asking with getUserData later. What’s wrong?


There are no such method as setUserData() and setAttribute() in the dhxToolbar API: … _toc_alpha