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
5 Answers, 1 is accepted
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.
Rank 1
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.
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.
Rank 1
Many thanks for investigating this issue. I will be happy to provide further information if required.
Regards,
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.