Cascading Combo Boxes > How To Get the Third Combo To Update?

[Cartoon Head]

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

[Cartoon Head]

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.

[Cartoon Head]

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.

[Dimitar Terziev]

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