This is a migrated thread and some comments may be shown as answers.

New combo with checkbox items added on the client.

8 Answers 152 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 12 Feb 2008, 01:58 PM

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

answered on 13 Feb 2008, 08:00 AM

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??

answered on 11 Jan 2010, 11:16 PM

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!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

New combo with checkbox items added on the client.

8 Answers, 1 is accepted