SelectedValue property is not properly rendered on page load

[Pat Gaule]

I'm seeing some weird behavior with the SelectedValue in the RadComboBox not being properly rendered as "selected" when the page is initially loaded.  Instead of the SelectedValue being shown in the dropdown menu, the first item in the RadComboBox is "selected."  Through debugging, I have verified that the SelectedValue propery *is* set correctly when the page loads.  Additionally, if I click on the combobox and click off, it scrolls down to the correct value and selects it.  Therefore, I don't think it's an issue with the SelectedValue property not getting set.  I think it's an issue with the HTML and java-script not rendering the control properly on the initial page load.

To give some context, this RadComboBox is inside of a User Control that gets dynamically loaded into a RadTabStrip/RadMultiPage at runtime.  The issue happens regardless of whether the RadComboBox is populated/bound directly on the ascx control or programatically on the code-behind for the control.

From the DOM inspector built into Firefox, here is the HTML source of the control when I first click on the tab for this page:

    <div id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId" class="RadComboBox RadComboBox_Web20" skinspath="~/RadControls/ComboBox/Skins" style="width: 150px;">
    <table class="" summary="combobox" style="border-width: 0pt; border-collapse: collapse;">
        <tbody><tr>
            <td style="width: 100%;" class="rcbInputCell rcbInputCellLeft"><input autocomplete="off" name="ctl00$bodyContent$beneficiaryinfo$ddlJurisdictionId" class="rcbInput" id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_Input" value="(select one)" type="text"></td>
            <td class="rcbArrowCell rcbArrowCellRight"><a id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_Arrow" style="overflow: hidden; display: block; position: relative; outline: medium none;">select</a></td>

        </tr>
    </tbody></table>
    <div class="rcbSlide" style="z-index: 6000;"><div id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Web20 " style="display: none;"><div class="rcbScroll rcbWidth" style="height: 100px; width: 100%;"><ul class="rcbList" style="list-style: none outside none; margin: 0pt; padding: 0pt;"><li class="rcbItem ">(select one)</li><li class="rcbItem ">None</li><li class="rcbItem ">Alabama</li><li class="rcbItem ">Alaska</li><li class="rcbItem ">Arizona</li><li class="rcbItem ">Arkansas</li><li class="rcbItem ">California</li><li class="rcbItem ">Colorado</li><li class="rcbItem ">Connecticut</li><li class="rcbItem ">Delaware</li><li class="rcbItem ">District of Columbia</li><li class="rcbItem ">Florida</li><li class="rcbItem ">Georgia</li><li class="rcbItem ">Hawaii</li><li class="rcbItem ">Idaho</li><li class="rcbItem ">Illinois</li><li class="rcbItem ">Indiana</li><li class="rcbItem ">Iowa</li><li class="rcbItem ">Kansas</li><li class="rcbItem ">Kentucky</li><li class="rcbItem ">Louisiana</li><li class="rcbItem ">Maine</li><li class="rcbItem ">Maryland</li><li class="rcbItem ">Massachusetts</li><li class="rcbItem ">Michigan</li><li class="rcbItem ">Minnesota</li><li class="rcbItem ">Mississippi</li><li class="rcbItem ">Missouri</li><li class="rcbItem ">Montana</li><li class="rcbItem ">Nebraska</li><li class="rcbItem ">Nevada</li><li class="rcbItem ">New Hampshire</li><li class="rcbItem ">New Jersey</li><li class="rcbItem ">New Mexico</li><li class="rcbItem ">New York</li><li class="rcbItem ">North Carolina</li><li class="rcbItem ">North Dakota</li><li class="rcbItem ">Ohio</li><li class="rcbItem ">Oklahoma</li><li class="rcbItem ">Oregon</li><li class="rcbItem ">Pennsylvania</li><li class="rcbItem ">Rhode Island</li><li class="rcbItem ">South Carolina</li><li class="rcbItem ">South Dakota</li><li class="rcbItem ">Tennessee</li><li class="rcbItem ">Texas</li><li class="rcbItem ">Utah</li><li class="rcbItem ">Vermont</li><li class="rcbItem ">Virginia</li><li class="rcbItem ">Washington</li><li class="rcbItem ">West Virginia</li><li class="rcbItem ">Wisconsin</li><li class="rcbItem ">Wyoming</li></ul></div></div></div><input value="{"logEntries":[],"value":"34","text":"(select one)","enabled":true}" autocomplete="off" id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_ClientState" name="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_ClientState" type="hidden">

</div>

Here is the HTML source of the control if I simply click on the combobox and then click off (without selecting a new value):

    <div id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId" class="RadComboBox RadComboBox_Web20" skinspath="~/RadControls/ComboBox/Skins" style="width: 150px;">
    <table class="" summary="combobox" style="border-width: 0pt; border-collapse: collapse;">
        <tbody><tr>
            <td style="width: 100%;" class="rcbInputCell rcbInputCellLeft"><input autocomplete="off" name="ctl00$bodyContent$beneficiaryinfo$ddlJurisdictionId" class="rcbInput" id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_Input" value="(select one)" type="text"></td>
            <td class="rcbArrowCell rcbArrowCellRight"><a id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_Arrow" style="overflow: hidden; display: block; position: relative; outline: medium none;">select</a></td>

        </tr>
    </tbody></table>
    <input value="{"logEntries":[],"value":"","text":"Nebraska","enabled":true}" autocomplete="off" id="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_ClientState" name="ctl00_bodyContent_beneficiaryinfo_ddlJurisdictionId_ClientState" type="hidden">
</div>

Notice how "Nebraska" (the SelectedValue in this case) is properly selected as the state in the 2nd example.

Here is the code that is setting the SelectedValue:

if (ddlJurisdictionId.Items.FindItemByValue(JurisdictionId.ToString()) != null)
{
    ddlJurisdictionId.SelectedValue = JurisdictionId.ToString();
}
else
{
    ddlJurisdictionId.Items[0].Selected = true;
}

I am seeing this exact behavior in *every* browser I've tried (IE8, Firefox 3.6.8, Chrome 10.0.648.133).  I am developing using version 2011_1_315 of the RadControls.  If I use an asp.net DropDownList in place of the RadComboBox, this issue does *not* happen.

Any ideas what would cause this?

[Pat Gaule]

OK, I figured out a way to fix this.  It will render properly if I add an "OnDataBound" event handler for the RadComboBox and assign the selected value within that handler:

 

protected void ddlJurisidctionId_DataBound(object sender, EventArgs e)
{
    ddlJurisdictionId.SelectedValue = JurisdictionId.ToString();
}

This makes for some clumsy code because I am populating other controls on the field in a separate method (called from within the Page_Load() method), but I can live with it.

I'm still curious why it didn't work the other way.  Does the combobox selected value need to be set within a databound event handler if the control is bound to a datasource?  I've never seen that requirement with a standard ASP.NET control, but I'm relatively new to ASP.NET.

[Dimitar Terziev]

Hello Pat,

In general you could set the selected value of the RadComboBox in Page_Load event. This functionality is working properly on our side as you could see on this clip. The problem may be related to your custom scenario.

The first item of the RadComboBox is preselected by default, if you haven't specified that you want some other item to be selected and AllowCustomText property is set to false.

Greetings,
Dimitar Terziev
the Telerik team