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

[Solved] Can related RadComboBoxes update more than 1 child?

4 Answers 133 Views

ComboBox

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

Eric asked on 15 Jul 2009, 05:08 PM

I have a form I'm working on where I would like to update 2 RadComboboxes when 1 is changed.

What I'm finding is when I call requestItems() that it does it for the first child box, but not the second.

Has anyone figured out a way to do this?

Sample code is below:

    
            <%@ Page Language="VB" Trace="false" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd"> 
        
            <script runat="server">  
        
                Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)  
        
                    Dim cmbo As New RadComboBox  
        
                    cmbo.ID = "RadComboBox1" 
        
                    cmbo.EnableLoadOnDemand = True 
        
                    cmbo.Filter = RadComboBoxFilter.StartsWith  
        
                    cmbo.AllowCustomText = False 
        
                    cmbo.MarkFirstMatch = True 
        
                    cmbo.EmptyMessage = "Data not found" 
        
                    cmbo.Width = 186 
        
                    cmbo.OnClientSelectedIndexChanging = "goLoadCountries" 
        
                    cmbo.OnClientItemsRequesting = "buildForm" 
        
                    AddHandler cmbo.ItemsRequested, AddressOf RadComboBox1_ItemsRequested  
        
                    Dim l As New Label  
        
                    l.ID = "Label1" 
        
                    l.AssociatedControlID = cmbo.ID  
        
                    l.Text = "Continent: " 
        
                    divPrompts.Controls.Add(l)  
        
                    divPrompts.Controls.Add(cmbo)  
        
                    ' build more combox, done after the above code so the items requested fires for #1  
        
                    cmbo = New RadComboBox  
        
                    cmbo.ID = "RadComboBox2" 
        
                    cmbo.EnableLoadOnDemand = False ' this needs to be set to false to not allow the user from inputting their own values  
        
                    'cmbo.Filter = RadComboBoxFilter.StartsWith  
        
                    cmbo.AllowCustomText = False 
        
                    cmbo.MarkFirstMatch = True 
        
                    cmbo.EmptyMessage = "Data not found" 
        
                    cmbo.Width = 186 
        
                    cmbo.OnClientSelectedIndexChanging = "goLoadCountries" 
        
                    cmbo.OnClientItemsRequesting = "buildForm" 
        
                    cmbo.OnClientItemsRequested = "ItemsLoaded" 
        
                    cmbo.Attributes.Add("parent", "RadComboBox1")  
        
                    AddHandler cmbo.ItemsRequested, AddressOf RadComboBox1_ItemsRequested  
        
                    l = New Label  
        
                    l.ID = "Label2" 
        
                    l.AssociatedControlID = cmbo.ID  
        
                    l.Text = "Country: " 
        
                    divPrompts.Controls.Add(l)  
        
                    divPrompts.Controls.Add(cmbo)  
        
                    cmbo = New RadComboBox  
        
                    cmbo.ID = "RadComboBox3" 
        
                    cmbo.EnableLoadOnDemand = False 'True  
        
                    'cmbo.Filter = RadComboBoxFilter.StartsWith  
        
                    cmbo.AllowCustomText = False 
        
                    cmbo.MarkFirstMatch = True 
        
                    cmbo.EmptyMessage = "Data not found" 
        
                    cmbo.Width = 186 
        
                    cmbo.OnClientSelectedIndexChanging = "goLoadCountries" 
        
                    cmbo.OnClientItemsRequesting = "buildForm" 
        
                    cmbo.OnClientItemsRequested = "ItemsLoaded" 
        
                    cmbo.Attributes.Add("parent", "RadComboBox1")  
        
                    AddHandler cmbo.ItemsRequested, AddressOf RadComboBox1_ItemsRequested  
        
                    l = New Label  
        
                    l.ID = "Label3" 
        
                    l.AssociatedControlID = cmbo.ID  
        
                    l.Text = "City: " 
        
                    divPrompts.Controls.Add(l)  
        
                    divPrompts.Controls.Add(cmbo)  
        
                    If Not Page.IsPostBack Then  
        
                        'fill the continents combo  
        
                        RadComboBox1_ItemsRequested(divPrompts.FindControl("RadComboBox1"), New RadComboBoxItemsRequestedEventArgs)  
        
                    End If  
        
                End Sub  
        
                Protected Sub RadComboBox1_ItemsRequested(ByVal o As Object, ByVal e As RadComboBoxItemsRequestedEventArgs)  
        
                    Dim cmbo As RadComboBox = DirectCast(o, RadComboBox)  
        
                    cmbo.Items.Clear()  
        
                    Select Case cmbo.ID  
        
                        Case "RadComboBox1"  
        
                            For y As Integer = 0 To 10  
        
                                cmbo.Items.Add(New RadComboBoxItem(y, y))  
        
                            Next  
        
                        Case Else  
        
                            cmbo.Items.Add(New RadComboBoxItem("Box 1 value: " & e.Context("RadComboBox1").ToString(), e.Context("RadComboBox1").ToString()))  
        
                    End Select  
        
                End Sub  
        
            </script> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">  
        
                <head id="Head1" runat="server" > 
        
                <title></title>  
        
                </head> 
        
                <body style="height:100%;margin:0px;" scroll="no" > 
        
                <form id="form1" method="post" runat="server" style="height:100%;margin:0px;">  
        
                   <telerik:radscriptmanager ID="RadScriptManager1" runat="server">  
        
                    </telerik:radscriptmanager> 
        
                        <div id="divPrompts" runat="server" > 
        
                        </div> 
        
                    <script type="text/javascript">  
        
            function goLoadCountries(combo, eventArqs)  
        
            {  
        
                var item = eventArqs.get_item();  
        
                var prompt;  
        
                combo.tempVal = item.get_value();  
        
                for (i = 0; i < Telerik.Web.UI.RadComboBox.ComboBoxes.length; i++) {  
        
                    prompt = Telerik.Web.UI.RadComboBox.ComboBoxes[i];  
        
                    if (prompt.get_attributes().getAttribute("parent") == combo.get_id()) {  
        
                        prompt.set_text("Loading...");  
        
                        prompt.requestItems(item.get_value(), false);  
        
                    }  
        
                }  
        
            }  
        
            function ItemsLoaded(combo, eventArgs) {  
        
                if (combo.get_items().get_count() > 0)  
        
                {  
        
                    combo.get_inputDomElement().className = "rcbInput";  
        
                    var item = combo.get_items().getItem(0);  
        
                    item.select();  
        
                }  
        
            }  
        
            function buildForm(sender, eventArgs){  
        
                var context = eventArgs.get_context();  
        
                for (i=0; i<Telerik.Web.UI.RadComboBox.ComboBoxes.length; i++){  
        
                    context[Telerik.Web.UI.RadComboBox.ComboBoxes[i].get_id()] = Telerik.Web.UI.RadComboBox.ComboBoxes[i].tempVal;  
        
                }  
        
            }  
        
                    </script> 
        
                    </form> 
        
                </body> 
        
            </html>

4 Answers, 1 is accepted

answered on 21 Jul 2009, 01:51 PM

Hi Eric,

This should not be happening. I tried in this demo by putting the following pageLoad event handler definition on the page (instead of the existing one):

                    function pageLoad() {         
                for (var i = 0; i < Telerik.Web.UI.RadComboBox.ComboBoxes.length; i++) {           
                    prompt = Telerik.Web.UI.RadComboBox.ComboBoxes[i];         
                     
                    if (prompt.get_id().indexOf("RadComboBox") == 0) {         
                        prompt.add_itemsRequested(function(sender) {         
                            sender.showDropDown();         
                        });         
                        prompt.requestItems("1", false);         
                    }         
                }          
            }         

Shortly after the page loads, all related ComboBoxes' drop downs open up. Please try putting the same function as above to your page to verify if each ComboBox has initiated an Items Request.

Regards,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

answered on 21 Jul 2009, 02:23 PM

Simon,

I added the pageLoad() code as suggested, but am getting a javascript alert message that says "The given key was not present in the dictionary."

I'm guessing that would have to do with the fact that the comboboxes are dynamically created.

Another point I'd like to clarify is that I want the first combobox's value to be used to update the other two. In the example code, that would mean Continent would update both Country & City...not Continent updating Country and Country then updating City.

What I've found is that you can only execute prompt.requestItems(...) once per OnClientSelectedIndexChanging. You cannot loop these. If there's a way around that, I think all my problems would be solved.

answered on 24 Jul 2009, 02:04 PM

Hi Eric,

Indeed that would be the error this functions raises at your page since the RadComboBoxi Context properties are not set for the ComboBoxes. Please excuse me for my mistake.

In any case, I tested further with your code and found the real cause of the issue. Shortly after the loop in the first triggered goLoadCountried event handler starts, it initiates an ajax callback for the second ComboBox (i = 1). Still, ASP.NET AJAX scripts use the same global i variable to count the number of pending ajax requests that have been initiated. As one new request is added, the i variable is incremented by one.

In your case, this means that as soon as the second ComboBox starts its request, the i variable changes its value to 2 and the loop ends, skipping the third ComboBox.

Please resolve the issue by using var in the loop definition:

                    function goLoadCountries(combo, eventArqs) {         
                var item = eventArqs.get_item();         
                var prompt;         
                     
                combo.tempVal = item.get_value();         
                     
                for (var i = 0; i < Telerik.Web.UI.RadComboBox.ComboBoxes.length; i++) {         
                prompt = Telerik.Web.UI.RadComboBox.ComboBoxes[i];         
                     
                   if (prompt.get_attributes().getAttribute("parent") == combo.get_id()) {         
                        prompt.set_text("Loading...");         
                        prompt.requestItems(item.get_value(), false);         
                    }         
                }         
            }         

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.