This is a migrated thread and some comments may be shown as answers.
Cascading Combo Boxes > How To Get the Third Combo To Update?
3 Answers 47 Views
This is a migrated thread and some comments may be shown as answers.
Cartoon Head
Top achievements
Rank 1
Cartoon Head asked on 05 Jul 2011, 04:40 PM

I have read the sample and it was very helpful, but I guess I am missing something, because I cannot get the third combo to update properly.

In the attached sample, I have 3 combos:  Content Area, Teacher Name, Student Name

When a user changes the Content Area, I want both combos to refresh.  It is a true cascade, because the teacher name also determines the list of students. 

For demo purposes, I have made it so the students lat names start with the same letter as their teachers.  So, if you select [Mathematics], not only should [Euler, Leonhard] appear (which it does), but also his first student [Edwards, Ernie].  This does not happen.  The student list remains for the previous teacher, until you manually change that second combo.

I am sure this is simple -- I am probably missing something on the control that would trigger the update to the third combo -- but I've been struggling with this for a few days now and need a more experienced set of eyes.

Suggestions are much appreciated!

Default.aspx

<form id="form1" runat="server">
  
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" 
        EnableTheming="True">
    </telerik:RadScriptManager>
  
    <div>
  
        <table cellspacing="10px">
            <tr>
                <td>
                    Content Area<br />
                    <telerik:RadComboBox ID="cboContentAreas" runat="server" 
                        OnClientSelectedIndexChanging="cboTeachers_Load"
                        OnClientItemsRequested="ItemsLoaded"
                        OnItemsRequested="cboContentAreas_ItemsRequested"
                        Width="200px">
                    </telerik:RadComboBox>
                </td>
                <td>
                    Teacher<br />
                    <telerik:RadComboBox ID="cboTeachers" runat="server" 
                        OnClientSelectedIndexChanging="cboStudents_Load"
                        OnClientItemsRequested="ItemsLoaded"
                        OnItemsRequested="cboTeachers_ItemsRequested"
                        Width="200px">
                    </telerik:RadComboBox>
                </td>
                <td>
                    Student<br />
                    <telerik:RadComboBox ID="cboStudents" runat="server" 
                        OnItemsRequested="cboStudents_ItemsRequested"
                        OnClientItemsRequested="ItemsLoaded"
                        Width="200px">
                    </telerik:RadComboBox>
                </td>
            </tr>
        </table>                        
  
    </div>
  
    <!-- Client-side scripts for client side combo box refreshes -->
    <script type="text/javascript">
  
    var cboTeachers;
    var cboStudents;
  
    // Get id's of combo objects
    function pageLoad() {
        cboTeachers = $find("<%= cboTeachers.ClientID %>");
        cboStudents = $find("<%= cboStudents.ClientID %>");
    }
  
    // Set first item in a specified combo box
    function ItemsLoaded(combo, eventArgs) {
        if (combo.get_items().get_count() > 0) {
            // pre-select the first item
            combo.set_text(combo.get_items().getItem(0).get_text());
            combo.get_items().getItem(0).highlight();
        }
    }
  
    // Load Teachers
    function cboTeachers_Load(combo, eventArgs) {
        var item = eventArgs.get_item();
        cboTeachers.set_text(" ");
        cboTeachers.clearSelection();
        cboTeachers.requestItems(item.get_value(), false);
  
    }
  
    // Load Students
    function cboStudents_Load(combo, eventArgs) {
        var item = eventArgs.get_item();
        cboStudents.set_text(" ");
        cboStudents.clearSelection();
        cboStudents.requestItems(item.get_value(), false);
    }
  
  
    </script>
  
  
</form>


Default.aspx.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Call cboContentAreas_Load()
    Call cboTeachers_Load(cboContentAreas.SelectedValue)
    Call cboStudents_Load(cboTeachers.SelectedValue)
End Sub
 
Protected Sub cboContentAreas_Load()
    'This would usually call a SQL connection, but for demo purposes, it's hardcoded
    Dim itemsList As New ArrayList()
    itemsList.Add("Language Arts")
    itemsList.Add("Mathematics")
    itemsList.Add("Science")
    cboContentAreas.DataSource = itemsList
    cboContentAreas.DataBind()
End Sub
 
Protected Sub cboTeachers_Load(ContentArea As String)
    'This would usually call a SQL connection, but for demo purposes, it's hardcoded
    Dim itemsList As New ArrayList()
    If ContentArea = "Language Arts" Then
        itemsList.Add("Austen, Jane")
        itemsList.Add("Dickens, Charles")
        itemsList.Add("Kipling, Rudyard")
    ElseIf ContentArea = "Mathematics" Then
        itemsList.Add("Euler, Leonhard")
        itemsList.Add("Fibonacci, Leonardo")
        itemsList.Add("Gauss, Carl")
    Else
        itemsList.Add("Curie, Marie")
        itemsList.Add("Heisenberg, Werner")
        itemsList.Add("Rutherford, Ernest")
    End If
    cboTeachers.DataSource = itemsList
    cboTeachers.DataBind()
End Sub
 
Protected Sub cboStudents_Load(TeacherName As String)
    'This would usually call a SQL connection, but for demo purposes, it's hardcoded
    Dim itemsList As New ArrayList()
    If TeacherName = "Austen, Jane" Then
        itemsList.Add("Alba, Anna")
        itemsList.Add("Armond, Artie")
        itemsList.Add("Avery, Augustus")
    ElseIf TeacherName = "Dickens, Charles" Then
        itemsList.Add("Darby, Derek")
        itemsList.Add("Devon, Denise")
        itemsList.Add("DiCicco, Dominic")
    ElseIf TeacherName = "Kipling, Rudyard" Then
        itemsList.Add("Keane, Karen")
        itemsList.Add("Kirby, Kirk")
        itemsList.Add("Kuval, Kiersten")
    ElseIf TeacherName = "Euler, Leonhard" Then
        itemsList.Add("Edwards, Ernie")
        itemsList.Add("Epps, Eunice")
        itemsList.Add("Everett, Evelyn")
    ElseIf TeacherName = "Fibonacci, Leonardo" Then
        itemsList.Add("Farley, Frank")
        itemsList.Add("Ferme, Frederico")
        itemsList.Add("Freitag, Fritz")
    ElseIf TeacherName = "Gauss, Carl" Then
        itemsList.Add("Garrison, Ginger")
        itemsList.Add("Gerwig, Greta")
        itemsList.Add("Goodwin, George")
    ElseIf TeacherName = "Curie, Marie" Then
        itemsList.Add("Carlson, Christina")
        itemsList.Add("Cerone, Cassandra")
        itemsList.Add("Cooper, Charlie")
    ElseIf TeacherName = "Heisenberg, Werner" Then
        itemsList.Add("Hartley, Hannah")
        itemsList.Add("Higgins, Hank")
        itemsList.Add("Hughes, Houston")
    Else
        itemsList.Add("Rand, Rita")
        itemsList.Add("Richmond, Robert")
        itemsList.Add("Rutherford, Rodney")
    End If
    cboStudents.DataSource = itemsList
    cboStudents.DataBind()
End Sub
 
Protected Sub cboContentAreas_ItemsRequested(sender As Object, e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles cboContentAreas.ItemsRequested
    cboContentAreas_Load()
End Sub
 
Protected Sub cboTeachers_ItemsRequested(sender As Object, e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles cboTeachers.ItemsRequested
    cboTeachers_Load(e.Text)
End Sub
 
Protected Sub cboStudents_ItemsRequested(sender As Object, e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles cboStudents.ItemsRequested
    cboStudents_Load(e.Text)
End Sub

3 Answers, 1 is accepted

Sort by
0
Cartoon Head
Top achievements
Rank 1
answered on 05 Jul 2011, 05:09 PM
I have figured it out!

The key was to use the OnClientItemsRequested method, and make it control-specific.

<telerik:RadComboBox ID="cboTeachers" runat="server"  
    OnClientSelectedIndexChanging="cboStudents_Load"
    OnClientItemsRequested="cboTeachers_Cascade"
    OnItemsRequested="cboTeachers_ItemsRequested" 
    Width="200px">
</telerik:RadComboBox>

Allow the ItemsLoaded() function to select the first item, and then use that item to trigger a request on the cascaded control:

// Cascade after Teachers loaded
function cboTeachers_Cascade(combo, eventArgs) {
    ItemsLoaded(cboTeachers, eventArgs);
    if (cboTeachers.get_items().get_count() > 0) {
        // cascade request to dependent combo
        var selectedValue = cboTeachers.get_items().getItem(0).get_value();
        cboStudents.requestItems(selectedValue, false);
    }
}

That takes care of it!

Wicked awesome.

0
Cartoon Head
Top achievements
Rank 1
answered on 04 Aug 2011, 06:14 PM
It should be noted that, although this solution APPEARS to work, in actually when the form is submitted, it loses track of the selected items in each combo, reverting to value of the 0 index item.  This was reported as a bug to Telerik (ticket ID #441432, "Cascading combo works, but SelectedValues seem to reset upon submit), but they were unable to resolve the issue.

"The scenario that you are trying to implement is not supported when binding the RadComboBoxes and using the load on demand functionality."

The recommended solution was to use the strategy employed in their demo, where selecting each box does a cascading load on demand to subsequent boxes, but always starts at index -1 with no item selected.


0
Dimitar Terziev
Telerik team
answered on 09 Aug 2011, 02:22 PM
Hi Peter,

When implementing the scenario from this demo here you should set the EnableLoadOnDemand property to True in order the text and selected value to be persisted across post-backs.

Another approach is to use the OnSelectedIndexChanged event to bind the cascading comboboxes with the appropriate values.

Greetings,
Dimitar Terziev
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Asked by
Cartoon Head
Top achievements
Rank 1
Answers by
Cartoon Head
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or