Can we create RadComboBox at client side

[Chinthana Jayawardena]

Hi All,

I have an existing web user control which uses the ordinary drop-down boxes and they are created at client side. Now I want to replace the ordinary dropdown controls with the Radcombobox. But I can't get it done since RadComboBox control need the runat=server attribute.
So what I need is to create the RadComboBox controls dynamically from javascripts. I saw samples that create RadComboBoxItem at client side, but none for control itself creation. Is this possible?

Thanks,
Chinthana

[Shinu]

Hi Chinthana,

Checkout the forum link which discusses similar scenario.
Create RadCombo Client side?

One suggestion to achieve similar functionality, by setting the visibility from client side.
JavaScript:

<script type="text/javascript">
function showCombo()
{
    var combo = $find("<%= RadComboBox1.ClientID %>");
    combo.set_visible(true); // Show Combo
}
function hideCombo()
{
    var combo = $find("<%= RadComboBox1.ClientID %>");
    combo.set_visible(false); // Hide the Combo
}
</script>

-Shinu.

[Royal]

 function createComboBox(clientId, parentSelector) {

            uniqueName = clientId.replace("_", "$");
            var html = '<div id="' + clientId + '" class="RadComboBox RadComboBox_Default SizeChoices" style="width:98px;white-space:normal;"><table summary="combobox" style="border-width:0;border-collapse:collapse;width:100%"><tr class="rcbReadOnly"><td style="width:100%;" class="rcbInputCell rcbInputCellLeft"><input name="' + uniqueName + '" type="text" class="rcbInput" id="' + clientId + '_Input" value="4 x 4 oz" readonly="readonly" /></td><td class="rcbArrowCell rcbArrowCellRight"><a id="' + clientId + '_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td></tr></table><div class="rcbSlide" style="z-index:6000;"><div id="' + clientId + '_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default " style="display:none;"><div class="rcbScroll rcbWidth" style="width:100%;"><ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;"></ul></div></div></div><input id="' + clientId + '_ClientState" name="' + clientId + '_ClientState" type="hidden" /></div>';
            $(html).appendTo(parentSelector);
            $create(Telerik.Web.UI.RadComboBox, { "_dropDownWidth": 0, "_height": 0, "_skin": "Default", "_uniqueId": uniqueName, "clientStateFieldID": clientId + "_ClientState", "collapseAnimation": "{\"duration\":450}", "expandAnimation": "{\"duration\":450}", "itemData": [], "localization": "{\"AllItemsCheckedString\":\"All items checked\",\"ItemsCheckedString\":\"items checked\",\"CheckAllString\":\"Check All\"}", "selectedIndex": 0 }, {  }, null, $get(clientId));
            var combo = $find(clientId);
            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
            comboItem.set_text("item12121");
            combo.trackChanges();
            combo.get_items().add(comboItem);
            comboItem.select();
            combo.commitChanges();
        }