Can we create RadComboBox at client side

3 posts, 0 answers
  1. Chinthana Jayawardena
    Chinthana Jayawardena avatar
    3 posts
    Member since:
    Jul 2009

    Posted 15 Aug 2009 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Aug 2009 Link to this post

    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.
  3. Royal
    Royal avatar
    1 posts
    Member since:
    Aug 2012

    Posted 04 Jan 2013 Link to this post

     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();
            }
Back to Top