Start Building Professional
Web Apps Today

Add Images for Selections in Combo

I'm creating a dhtmlXCombo in JavaScript and I want to add an image for each selection. After searching the knowledgebase here and looking at the sample pages, I came up with the following;

window.dhx_globalImgPath="./codebase/imgs/";
var theGridCombo = new dhtmlXCombo("grid_select","selectType",160,"image");
// theGridCombo.addOption([["businessUnit","Business Unit"],["businessProcess","Business Process"],["businessSystem","Business System"]]);
theGridCombo.addOption({value:"businessUnit",text:"Business Unit",css:"",img_src:"ico-unit.gif"});
theGridCombo.addOption({value:"businessProcess",text:"Business Process",css:"",img_src:"ico-business-process.gif"});
theGridCombo.addOption({value:"businessSystem",text:"Business System",css:"",img_src:"ico-system.gif"});

I include the common, combo, and combo_extra js files. What I get is a list with no text or graphics but there are three selections in the list. If I select one of them, I get the missing icon (square with a circle in it) image in the selection box but no text.

If I comment the three lines out and use the single add option call with just the text, then I see the text for all three selections.

Paul

You can use
theGridCombo.addOption([{value:"businessUnit",text:"Business Unit",css:"",img_src:"ico-unit.gif"},
 {value:"businessProcess",text:"Business Process",css:"",img_src:"ico-business-process.gif"},
 {value:"businessSystem",text:"Business System",css:"",img_src:"ico-system.gif"}]);

The new code does work in that I now see the three options.  So apparently I have to specify all options in one call to addOption and I can't make multiple calls as I did above.

However, I now get the missing icon symbol (square with a red x in it) next to each of the options.  I did set the global image path in the code and the icons do exist in that location. 

I am able to see the icons if I copy them to the same directory as the HTML page.  So it looks to me like the dhtmlXCombo control is not using the global image path to find the icons.

Paul

Global image path used only to point to the place where combo specific files stored ( image for select list and blank html file ) 
The images used inside combo option not using global path settings, they are works the same as images on the page, so their path relative to current html page location.