Menu setItemText Not Refreshing Command Text?

I have a menu command used to toggle a grid row between “active” and “inactive” states. I.e., when an item in the grid is “active” the menu command is to show the text “Inactivate” with an image corresponding to this action. Alternatively, when an item in the grid is “inactive” the menu command is to be “Activate” withan image corresponding to that action. Everything seems to be working fine except that the text, while evidently changed programatically, is not showing up in the actual menu display. Oddly, the image is changing as intended.

Here’s what the code looks like, invoked upon right-click (with a couple of diagnostic alerts):

[code]function onGridRowClick(rowId, col, oEvent)
{
gridRowId = rowId;
gridRow = dataGrid.getRowIndex(rowId);
gridCol = col;

if (null != contextMenu.getItemType(‘menuInactivate’)
{
contextMenu.showItem(‘menuInactivate’);
switch (‘undefined’ == typeof(dataGrid.getRowAttribute(rowId,‘isInactive’)) ? -1 : 1*dataGrid.getRowAttribute(rowId,‘isInactive’))
{
case 0: // item is active
contextMenu.setItemText(‘menuInactivate’, ‘Inactivate’);
alert('R-click, row is active, itemtext= '+contextMenu.getItemText(‘menuInactivate’));
contextMenu.setItemImage(‘menuInactivate’, ‘Inactivate.png’, ‘Inactivate_disabled.png’);
break;
case 1: // item is inactive
contextMenu.setItemText(‘menuInactivate’, ‘Activate’);
alert(‘R-click, row is inactive, itemtext=’+contextMenu.getItemText(‘menuInactivate’));
contextMenu.setItemImage(‘menuInactivate’, ‘Activate.png’, ‘Activate_disabled.png’);
break;
default:
contextMenu.hideItem(‘menuInactivate’);
break;
}
}
return true;
}[/code]

Here’re some screen shots of the menu and the diagnostic alerts:

On the first right-click on the bottom row, which starts “active.” You can see that the diagnostic alert shows this, and that the text is, at that time, set to “Inactivate.” When the context menu appears, is is as it should be, showing the correct text and =image:


The row’s color is changed to show it’s “inactive” and then another right-click is done. Here’s the diagnostic alert, showing the proper status, and that the text has been set to “Activate.” Yet when the context menu appears, the text is still “Inactivate.” Obviously the code was executed, since not only did the alert appear, but the image was properly changed as well.


I’m puzzled.

Here is an additional observation, which may or may not be related to the foregoing issue. At a minimum it is a bug.

When using IE, the problem is as described above. When using Chrome and Firefox, however, the image swapping can cause misplacement of the the images, as shown below. (The text is still changed, just as in IE.)


It gets more interesting… I added a call to context.MenuclearImage before I modify the images and text and, lo and behold, the text now toggles as designed (IE + Chrome + Firefox, all OK). The image placement, however, is still messed up:


All in all, it appears that the child nodes are not being properly navigated when the text and images are being replaced.

We haven’t managed to recreate the problem locally.

What menu version do you use ? Can you provide a complete sample to recreate the problem ?

Version used is 2.5 professional

It would be counter-productive to try to send you the thousands of lines of code included with dozens of programs, along with the requisite database tables, required to produce the symptoms. That’s why I was careful to provide diagnostic alerts and screenshots to illustrate the problem.

Nonetheless, the right-click event code is below.

  • _menuCommand.inactivateItem.id = ‘menuInactivate’
  • each row has a user attribute “isInactive” that = 0 if active, 1 if inactive
  • settings.txtInactivateMenu = “Inactivate”
  • settings.txtActivateMenu = “Activate”
	this.onGridRowRightClick = function (rowId, col, oEvent)
	{
		if (null != contextMenu.getItemType(_menuCommand.inactivateItem.id))
		{
			if (contextMenu.isItemHidden(_menuCommand.inactivateItem.id)) {contextMenu.showItem(_menuCommand.inactivateItem.id)}
			switch ('undefined' == typeof(dataGrid.getRowAttribute(rowId,'isInactive')) ? -1 : 1*dataGrid.getRowAttribute(rowId,'isInactive'))
        	{	
        		case 0: // item is active
    			{
					contextMenu.setItemImage(_menuCommand.inactivateItem.id, 'Inactivate.png', null);
        			contextMenu.setItemText(_menuCommand.inactivateItem.id, settings.txtInactivateMenu);
    	   			break;
    			}
    
        		case 1:  // item is inactive
    			{
					contextMenu.setItemImage(_menuCommand.inactivateItem.id, 'Activate.png', null);
        			contextMenu.setItemText(_menuCommand.inactivateItem.id, settings.txtActivateMenu);
       				break;
    			}
    				
    			default:
    			{
					contextMenu.hideItem(_menuCommand.inactivateItem.id);
        			break;
    			}
        	}
    	}
}

We have reproduced the problem with the 2.5 version.

The issue was fixed in the latest menu version, 2.6, which isn’t released yet.

Please try to use attached version.
menu_prereleased.zip (48 KB)

I am relieved to learn you were able to reproduce the problem, and that a solution has been crafted. Unfortunately, when attempting to use the version you sent I receive a JS error (shown below)


Please provide the complete demo. I have attached our test demo.
01.zip (57.9 KB)

After many hours of trial and error I have indeed succeeded in getting both the original problem resolved, as well as identifying the cause of the JavaScript error I previously noted.

  • The JavaScript error occurred because I’d defined the text for all submenu items as “” (empty string). After all, the right-click event was going to fill in the text for all items, so there seemed no need to provide any text when the context menu was being defined. As you can guess, this was a problem. As soon as I used some dummy entries for the text (which is indeed replaced at right-click time), the JavaScript error was avoided. This does suggest, however, that an appropriate check ought to be made for just such a situation, as must’ve been the case in the previous version, since the JavaScript error never occurred when I was using that.
  • The problem with toggling text and images in the context menu was corrected by use of the files you provided. That it took me hours and hours to get to that ended up being because I didn’t copy everything from your zip file to my website. I assumed, wrongly, that all I need to to test was to copy over the JavaScript files. Silly me, the CSS and image files were also required. I was only able to learn this by virtue of the fact that your test file worked fine from the start. This meant that the problem had to be somewhere in my code (where I wasted most of my time) or, as I eventually came to realize, in the CSS and image files. Thank you for sending me the test file. Seeing that it worked forced me to dig deep until I figured it out.

Having finally had a breakthrough, I must, however, point out a clear bug in the version you sent.

The documentation for the addNewSeparator ([url]http://docs.dhtmlx.com/doku.php?id=dhtmlxmenu:api_method_dhtmlxmenuobject_addnewseparator[/url]) says that the syntax is

addNewSeparator(nextToId, itemId)

where nextToId is the id of the menu item after which the separator is to be placed.

In the previous version one could actually insert separators in the menu exactly as implied – even after all the menu items have been defined. To put it another way, you could define menu items 1, 2, 3, 4 and then, after this was done, add separators after 1 and 3, ending up with 1, (sep), 2, 3, (sep), 4. Now, with the version you provided, you instead would get 1, 2, 3, 4, (sep), (sep), even though the ids for 1 and 3 had been used as the nextToId arguments. Now it is necessary to add the separators in sequence. I.e., addNewChild1, addNewSeparator, addNewChild2, addNewChild3, addNewSeparator, addNewChild4. This may seem acceptable, but it may be the case (as it is in what I’m developing), that you may not know until the end where separators should be placed. Obviously there would be no need for the nextToId if you had no choice but to implant the separators right after adding a menu item.

I’ve attached a revision of test file you so kindly provided that illustrates this point. Thanks again for sending that!
01_modified.zip (59.5 KB)

Hello,

thank you for detailed information about the bugs you have found. It’s really useful for us.

We’ll fix these bugs in the official version.

We have fixed the problems. All libraries are attached
codebase.zip (47.6 KB)

Bingo! It works. Thanks for your speedy response. You all seem to be very helpful. I’m in the process of evaluating the Professional version prior to what will likely be a purchase, so your kind assistance is appreciated.

Hi all, I am having a similar issue with the toolbar control. When Im trying to change the item text i get the attached image error. The execution seems to going on but the item text doesn´t change.

I´ve tried with the following code, and sometimes it works fine, but not always.

window.setTimeout(‘toolbar.setItemText(“insertar”, “Nuevo Circuito-Paso”);’, 0);
window.setTimeout(‘toolbar.setItemText(“borrar”, “Borrar Circuito-Paso”);’, 0);

Any idea??.

Thanks anyway.


Hi,

make sure that you called setItemText for existent item. If toolbar data are loaded from xml file, you need to call setItemText from on loading end handler:

toolbar.loadXML(url,function(){
toolbar.setItemText(“insertar”, “Nuevo Circuito-Paso”);
toolbar.setItemText(“borrar”, “Borrar Circuito-Paso”);
})

Hi Alexandra, thanks for the quick reply.
As I told you later, the following code works sometimes:

window.setTimeout('toolbar.setItemText("insertar", "Nuevo Circuito-Paso");', 0);

So the items exist, and I didnt create toolbar by xml, I did it by hand.

var toolbar = new dhtmlXToolbarObject(capa);
    toolbar.setIconsPath(path  + "/images/botones/");
    if(opc == "toolBarListado"){
        toolbar.loadXML(path + "/xml/toolBarListado.xml",function(){
        // En el onload
        toolbar.hideItem("borrar");
        });
    }else if (opc == "toolBarDetalle"){
        toolbar.loadXML(path + "/xml/toolBarDetalle.xml");
    }else if(opc == "toolBarVentanaDetalle"){
        toolbar.loadXML(path + "/xml/toolBarDetalle.xml",function(){
        // En el onload
        toolbar.hideItem("volver");
        });  
    }
    toolbar.attachEvent("onClick",function(id){
           var call = this.getUserData(id,"call");
           var param = this.getUserData(id,"param");
           if(call)
                 window[call]();
    });

Im still trying to know how to fix it.

Thanks anyway.

We need the completed demo to recreate the issue:

docs.dhtmlx.com/doku.php?id=othe … leted_demo