Parent Child ComboBoxes not working

6 posts, 0 answers
  1. Jason
    Jason avatar
    13 posts
    Member since:
    Aug 2012

    Posted 12 Nov 2008 Link to this post

    Hi,

    I have 3 combo boxes. When an item is selected in the first, the second is populated. When an item in the second is selected the third is populated. This all works fine until the page is posted back where the SelectedValues for the second and third combos have not changed from what they were initally set to when the page is loaded.

    The 3 combos and client side script look like:

     

    <telerik:RadComboBox runat="server" ID="cboCopyFromTariff" Width="250" OnClientSelectedIndexChanged="cboCopyFromTariff_ClientSelectedIndexChanged" />
    <telerik:RadComboBox runat="server" ID="cboCopyFromVersion" Width="250" OnClientSelectedIndexChanged="cboCopyFromVersion_ClientSelectedIndexChanged" OnClientItemsRequested="cboCopyFromVersion_ClientItemsRequested"/>
    <telerik:RadComboBox runat="server" ID="cboCopyFromTable" Width="250" OnClientItemsRequested="cboCopyFromTable_ClientItemsRequested" />

    function cboCopyFromVersion_ClientItemsRequested(sender, eventArgs) { 
        
    var items = sender.get_items();
        if (items.get_count() > 0)
            items.getItem(0).select();
    }

    function cboCopyFromTable_ClientItemsRequested(sender, eventArgs) { 
        
    var items = sender.get_items(); 
        
    if (items.get_count() > 0) 
            items.getItem(0).select();
    }

    And the server side code looks like this:

    private
    void cboCopyFromVersion_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        
    int tariffId = 0;
        
    int.TryParse(e.Text, out tariffId); 
        LoadCopyFromVersions(tariffId);
    }

    private void cboCopyFromTable_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
    {
        
    int tariffVersionId = 0; 
        
    int.TryParse(e.Text, out tariffVersionId); 
        LoadCopyFromTables(tariffVersionId);
    }

            
    private void LoadCopyFromVersions(int tariffId)
            {
                cboCopyFromVersion.Items.Clear();
                if (tariffId > 0)
                {
                    var versions =
                        from v in this.DataContext.TariffVersionSet
                        where v.Tariff.TariffId == tariffId
                        orderby v.StartDate descending
                        select v;

                    cboCopyFromVersion.Items.Clear();
                    cboCopyFromVersion.DataValueField = "TariffVersionId";
                    cboCopyFromVersion.DataTextField = "Description";
                    cboCopyFromVersion.DataSource = versions.ToList();
                    cboCopyFromVersion.DataBind();

                    //Default to the TariffVersion passed
                    if (cboCopyFromVersion.Items.Count > 0)
                    {
                        int TariffVersionId = this.TariffVersion.TariffVersionId;
                        if (cboCopyFromVersion.Items.FindItemByValue(TariffVersionId.ToString()) != null)
                            cboCopyFromVersion.SelectedValue = TariffVersionId.ToString();
                        else
                            cboCopyFromVersion.SelectedIndex = 0;
                        LoadCopyFromTables(int.Parse(cboCopyFromVersion.SelectedValue));
                    }
                    else
                        LoadCopyFromTables(0);
                }
                else
                    LoadCopyFromTables(0);

            }

            private void LoadCopyFromTables(int tariffVersionId)
            {
                cboCopyFromTable.Items.Clear();

                if (tariffVersionId > 0)
                {
                    var tables =
                        from tt in this.DataContext.TariffTableSet
                        where tt.TariffVersion.TariffVersionId == tariffVersionId
                        orderby tt.Description descending
                        select tt;

                    cboCopyFromTable.DataValueField = "TariffTableId";
                    cboCopyFromTable.DataTextField = "Description";
                    cboCopyFromTable.DataSource = tables.ToList();
                    cboCopyFromTable.DataBind();

                    //Default to the latest TariffVersion for the selected Tariff
                    if (cboCopyFromTable.Items.Count > 0)
                        cboCopyFromTable.SelectedIndex = 0;
                }
            }

    The problem occurs in the Save button's click handler:

     

            protected void btnSave_Click(object sender, EventArgs e)
            {
                EF.TariffTable table;

                if (optCopyTable.Checked && cboCopyFromTable.SelectedIndex > -1)
                    table = CopyTariffTable(int.Parse(cboCopyFromTable.SelectedValue));
                else
                    table = CreateEmptyTariffTable();

            }

    When a new item is selected in the first combo the second combo correctly displays the first item filtered by the first's selection. And the third combo correctly shows the first item correctly filtered by the second.

    However in the Save button handler the SelectedValue of the third combo (cboCopyFromTable)  does not match what is displayed as selected.

    I have read similar forum posts for previous versions of RadCombo and they suggest using the "Value" property instead of "SelectedValue", but the ASP.NET AJAX version doesn't have this property.

    The help file article ms-help://telerik.aspnetajax.radcontrols.2008.Q2/telerik.aspnetajax.radcombobox.2008.Q2/load-on-demand-additional-attributes.html suggests a way of linking two combos together but it depends on EnableLoadOnDemand to be true. This is not suitable for my solution as there are few items in each combo and I don't want the user to be able to type in the box.

    Can anyone suggest how to fix this so that the server side code is aware of the changes made during the AJAX callbacks?

    Many thanks,
    Jason Steele

     

  2. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 14 Nov 2008 Link to this post

    Hello Jason,

    Your case sounds very similar to the one shown in this live demo.

    If you put a submit Button on that page you will see that the selected Values of the ComboBoxes are correct.

    Please examine the code from the demo and compare it to yours in order to find any differences that may affect the behavior of the ComboBoxes in your page.

    Kind regards,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason
    Jason avatar
    13 posts
    Member since:
    Aug 2012

    Posted 14 Nov 2008 Link to this post

    Hi Simon,

    Many thanks for your response.

    I took a look at the example and found that in the server side button click event the SelectedIndex and SelectedItem values were incorrect, however SelectedValue and Text were correct.

    BUT (and this is what caused me the main problem) SelectedValue only works if the combo was NOT initially populated during the Page_Load and then re-populated as a result of a client side requestItems call.

    In my example above you will see that LoadCopyFromVersions is called from LoadCopyFromTables. What you can't see is that LoadCopyFromVersions is called from LoadCopyFromTariffs which is called by Page_Load. So all three of my combos were pre-populated during the Page_Load.

    The problem occcurs when an item is selected in the a parent combo. requestItems is called for the child combo and the child combo's ClientItemsRequested selects the first item in the list returned which is displayed correctly to the user. However, if the user now clicks the Submit button the server side value for SelectedValue is NOT that of the selected item - it is fact the value it was initially set to during the page load.

    I believe this may only happen if the user doesn't select another item from the child combo prior to posting.

    I have got around this by not pre-populating the child combos during Page_Load and triggering their inital load by implementing a client side pageLoad function instead:

    function

    pageLoad(sender, eventArgs) {
        if (!eventArgs.isPartialLoad)
            cboCopyFromTariff_ClientSelectedIndexChanged();
    }

    This issue sounds like it may be a bug as the SelectedValue is only incorrect in a certain scenario.

     

  5. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 17 Nov 2008 Link to this post

    Hello Jason,

    Thank you for providing additional details about the issue.

    Indeed, the behavior as you described it seems a bit odd.

    We will look into this issue in order to determine whether it is a bug and hopefully will resolve it in this case. I will contact you in this support thread as soon as we have results.

    I hope this is acceptable for you.

    Sincerely yours,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Jason
    Jason avatar
    13 posts
    Member since:
    Aug 2012

    Posted 17 Nov 2008 Link to this post

    Simon,

    Many thanks for investigating this issue. I will be happy to provide further information if required.

    Regards,
    Jason

  7. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 18 Nov 2008 Link to this post

    Hi Jason,

    The reason for this behavior is that upon postback the Items are recreated from the ViewState, where the initially loaded Items are present. That is why the selected value is the old one.

    I suggest you set EnableViewState to false for the second and third ComboBoxes. In this way, after postback, the controls will work as expected in this case.

    Please try using this approach and let me know how it goes.

    Kind regards,
    Simon
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017