New combo with checkbox items added on the client.

9 posts, 0 answers
  1. Michael
    Michael avatar
    16 posts
    Member since:
    Jan 2008

    Posted 07 Feb 2008 Link to this post

    Hi,

    I am using a combo box with an item template to display a list of checkboxes and need to add new combo items on the client - how can I create new items with the checkbox displayed.

    Thanks in advance,
     
    Michael

  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 11 Feb 2008 Link to this post

    Hi Michael,

    I am afraid this is not an easy task.
    In order the ItemTemplate to be applied you have to DataBind() the combobox.


    Greetings,
    Veskoni
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    16 posts
    Member since:
    Jan 2008

    Posted 12 Feb 2008 Link to this post

    Thanks Veskoni,

    I've decided to use a treeview with checkboxes="true" instead.
     
    Just one question though if I put the treeview into the combo's Item Template - how would I refer to it on the client side. I tried the following but it didn't return the correct reference.

    var myRTV = $get('<%= ((RadTreeView)RadComboBox1.FindItemByText("").FindControl("RadTreeView1")).ClientID %>'); 

    where 
        
    <Items>
           <telerik:RadComboBoxItem Text="" />
    </Items>
     
    Thank again.
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 12 Feb 2008 Link to this post

    Hello Michael,

    Please find below a sample code snippet that works as expected on our side.

    <body onload="test()">  
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager> 
            <telerik:RadComboBox ID="cboEditVersion" runat="server">  
                <Items> 
                    <telerik:RadComboBoxItem runat="server" Text="" /> 
                </Items> 
                <CollapseAnimation Duration="200" Type="OutQuint" /> 
                <ExpandAnimation Type="OutQuart" /> 
                <ItemTemplate> 
                    <telerik:RadTreeView runat="server" ID="RadTreeView1">  
                        <Nodes> 
                            <telerik:RadTreeNode Text="1">  
                                <Nodes> 
                                    <telerik:RadTreeNode Text="1_1">  
                                    </telerik:RadTreeNode> 
                                </Nodes> 
                            </telerik:RadTreeNode> 
                        </Nodes> 
                    </telerik:RadTreeView> 
                </ItemTemplate> 
            </telerik:RadComboBox> 
     
            <script type="text/javascript">  
            function test()  
            {  
                var myRTV = $get('<%= ((RadTreeView)cboEditVersion.FindItemByText("").FindControl("RadTreeView1")).ClientID %>');   
                alert(myRTV.uniqueID);  
            }  
            </script> 
     
        </form> 
    </body> 


    Sincerely yours,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Michael
    Michael avatar
    16 posts
    Member since:
    Jan 2008

    Posted 13 Feb 2008 Link to this post

    Thanks Paul,

    I'm a newbie so there is probably a simple explanation to the behavior I am experiencing, however when I use:

    var myRTV = $get('<%= ((RadTreeView)cboEditVersion.FindItemByText("").FindControl("RadTreeView1")).ClientID %>');  
     

    myRTV comes back as object with a reference type of DispHTMLDivElement and I am unable to then use any of the client side treeview methods such as: myRTV.get_nodes().get_count()

    however I found that if I use:

    var myRTV = $find('<%= ((RadTreeView)cboEditVersion.FindItemByText("").FindControl("RadTreeView1")).ClientID %>');  
     

    I can then call the client side treeview methods as required.

    What am I not getting here??

  7. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 14 Feb 2008 Link to this post

    Actually, you are right, Michael; my fault. $get is used to get a reference to a DOM element. It is an alias for Sys.UI.DomElement.getElementById:

    <span id="myLabel"></span>   
     
    var myLabel = $get('myLabel');  

    $find is an alias for Sys.Application.findComponent() and it's used to get a reference to a particular component, given its ID.

    Regards,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Michael
    Michael avatar
    16 posts
    Member since:
    Jan 2008

    Posted 15 Feb 2008 Link to this post

    Hi Paul,

    Thanks very much for the clarification.

    Regards, Michael.
  9. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 11 Jan 2010 Link to this post

    Is this still the case?

    I've seen that when I add a new ComboBoxItem to the ComboBox, I can directly manipulate the HTML of the ComboBoxItem via "newItem.get_element().innerHTML" (as long as I reference it ONLY after adding it to the Combobox).  As such, I can manually put whatever I want in there.  Is this the best/only course of action?

    I'm just heading down this path.

    Thank you.
  10. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 11 Jan 2010 Link to this post

    Ok, so I went down this path already.  What fun!  :)

    Instead of just accessing the innerHTML, I had to create all of the required DOM elements and link them together.  Here's some quick and dirty proof-of-concept code for anyone interested.  Note it's not fully tested, but preliminary tests are positive.  If anyone has a need for more information, feel free to reply and I'll add whatever I can.

    var rcb_lob = $find("<%= RCB1.ClientID %>"); 
    rcb_lob.get_items().clear(); 
     
    var newItem; 
    newnewItem = new Telerik.Web.UI.RadComboBoxItem(); 
    newItem.set_text("1900"); 
    newItem.set_value("1900"); 
    rcb_lob.get_items().add(newItem); 
     
    var divContainer = document.createElement('div'); 
    divContainer.onclick = function(e) { 
        e.cancelBubble = true
    var cbx = document.createElement('input'); 
    cbx.type = 'checkbox'
    cbx.id = 'CBX_' + newItem.get_value(); 
    cbx.name = 'CBX__' + newItem.get_value(); 
    cbx.onclick = function(e) { 
        e.cancelBubble = true
        yearClicked(); 
    cbx.tabindex = 99
    var lbl = document.createElement('label'); 
    lbl.setAttribute('for', cbx.id); 
    lbl.innerHTML = '--' + newItem.get_value() + '--'; 
    divContainer.appendChild(cbx); 
    divContainer.appendChild(lbl); 
    while (newItem.get_element().firstChild) { 
        newItem.get_element().removeChild(newItem.get_element().firstChild); 
    newItem.get_element().appendChild(divContainer); 
     

    In this code, I get a reference to the ComboBox and clear all of the items.  I then create a new ComboBoxItem and set the text and value.  In this case, I'm doing a selector for years, which is why I use "1900".  I then create a div that will hold the checkbox and a label.  I set an onclick to do the cancelBubble so that dropdown list doesn't close if you click inside it, but not on a checkbox.  I then create the checkbox and label.  the checkbox gets an onclick that does the cancelBubble again, as well as calling my yearClicked function that does some extra work not important here.  I then add the checkbox and label to the div I created.  Then finally, I clear the default controls in the new ComboBoxItem and add my div.

    FYI, this is my ItemTemplate:

    <ItemTemplate> 
        <div onclick="event.cancelBubble=true;"
        <asp:CheckBox runat="server" TabIndex="99" ID="CBX_Year" onclick="event.cancelBubble=true; yearClicked();" Value='<%# DataBinder.Eval(Container,"Value") %>' Text='<%# DataBinder.Eval(Container,"Text") %>' /> 
        </div> 
    </ItemTemplate> 
     


    As I said, it's quick and dirty, but it seems to be working.

    Have fun!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017