Pro version Combo not showin option text alongside images

Hi I have used the following code to build a form and load the structure from XML and then populate it with a PHP file from the database…

        var userSettings = mainLayout.cells("c").view("Settings");
        var userSettingsForm = userSettings.attachForm("User Settings");
        userSettingsForm.loadStruct("codebase/xml/forms/editUserSettingsForm.xml?e=" + new Date().getTime());
		userSettingsForm.load("./data/users/editUserSettingsFormData.php?e=" + new Date().getTime());

This all works fine… so far
My issue is that when I add a combo box comboType=“image” and path to the images the option text does not display. :frowning:

I am using the profession version of dhtmlx and have included the following files in my project…

<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
<script src="codebase/dhtmlx.js"></script>

XML Code:

<?xml version="1.0"?>
    <item type="fieldset" label="User Details" inputWidth="320" offsetLeft="10">
        <item type="input" label="First Name:" name="firstName" value="" required="true" validate="NotEmpty"/>
        <item type="input" label="Last Name:" name="lastName" value="" required="true" validate="NotEmpty"/>
        <item type="input" label="User Name:" name="userName" value="" minlength="6" required="true" validate="NotEmpty"/>
        <item type="input" label="Email:" name="emailAddress" value="" required="true" validate="NotEmpty,ValidEmail"/>
        <item type="template" label="Access Level:" name="role" value="" style="position: relative; top: 3px;"/>
        <item type="password" label="Password:" name="loginPassword" value="" minlength="6" maxlength="16" validate="NotEmpty,minLength,matchPassword"/>
        <item type="password" label="Re-Type:" name="confirmPassword" value="" minlength="6" maxlength="16" validate="NotEmpty,minLength,matchPassword"/>
    <item type="newcolumn" offset="20" />
    <item type="fieldset" label="General Settings" inputWidth="320">
        <item type="combo" comboType="image" readonly="true" label="Avatar:" name="userAvatar" inputWidth="120">
            <option value="user.png" img_src="./codebase/imgs/icons_users/user.png" >Male</option>
            <option value="user_female.png" img_src="./codebase/imgs/icons_users/user_female.png">Female</option>
            <option value="user_green.png" img_src="./codebase/imgs/icons_users/user_green.png">Green</option>
            <option value="user_orange.png" img_src="./codebase/imgs/icons_users/user_orange.png">Orange</option>
            <option value="user_red.png" img_src="./codebase/imgs/icons_users/user_red.png">Red</option>
            <option value="user_suit.png" img_src="./codebase/imgs/icons_users/user_suit.png">Suit</option>
    <item type="hidden" name="creationDate" value=""/>
    <item type="button" value="Update" offsetLeft="79"/>

I have spent a few hours going through the forums, documentation and samples to no avail… :cry:
Please help…

You need another XML sctucture for combo:

<item type="combo" comboType="image" readonly="true" label="Avatar:" name="userAvatar" inputWidth="120"> <option value="user.png" text="Male" img_src="./codebase/imgs/icons_users/user.png" /> <option value="user_female.png" text="Female" img_src="./codebase/imgs/icons_users/user_female.png" /> <option value="user_green.png" text="Green" img_src="./codebase/imgs/icons_users/user_green.png" /> <option value="user_orange.png" text="Orange" img_src="./codebase/imgs/icons_users/user_orange.png" /> <option value="user_red.png" text="Red" img_src="./codebase/imgs/icons_users/user_red.png" /> <option value="user_suit.png" text="Suit" img_src="./codebase/imgs/icons_users/user_suit.png" /> </item>

Thanks heaps Darya.
It’s all working fine now… :smiley:

FYI: the XML file for dhtmlxCombo/samples/01_initialization/02_combo_init.html is as follows.

    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
    <option value="5">five</option>
    <option value="6">six</option>
    <option value="7">seven</option>
    <option value="8">eight</option>
    <option value="9">nine</option>
    <option value="10">ten</option>

so you can see why i had trouble…

XML structures for combo and formCombo are different a little.
Please, check the next information: … index.html

Thank you for the clarification…

That link is AWESOME… :smiley: :smiley: :smiley: I wish I had that before.

is there one like that for JSON formats?

Thanks again for your help…

Meanwhile not :slight_smile:
JSON for combo:

combo = new dhtmlXCombo("combo_zone3", "alfa3", 200); combo.addOption([ { value:"one", text:"one" }, { value:"two", text:"two" }, { value:"three", text:"three" }, { value:"four", text:"four" }, { value:"five", text:"five" }, { value:"six", text:"six" }, { value:"seven", text:"seven" }]);
JSON for form you can find in different online samples like here: … bject.html
And some other samples from formSampleBrunch.