RadDropDownList doesnt store selected value in x_ClientState control

[Matthew Bishop]

Ok, so I am working on a project where inside a RadWizard control I am adding dynamically creating RadDropDownList controls.

RadDropDownList ddl = new RadDropDownList() { ID = string.Format("FrmDDL{0}", i) };

I then call a method to select the selected RadDropDownListItem (Now using every method I can think of to select the value) (The RadDropDownList is passed to the method as 'r')

foreach (DropDownListItem l in r.Items)
{
    if (string.Compare(value, l.Value) == 0) 
    { 
        l.Selected = true; 
        r.SelectedIndex = i; 
        r.SelectedValue = l.Value; 
        r.SelectedText = l.Text; 
    }
    i++;
}

 

Now where it gets interesting is when you look at the generated code

<div id="FrmDDL0" class="RadDropDownList" style="width:300px;" tabindex="0">
    <span class="rddlInner">
        <span class="rddlFakeInput">X4</span>
        <span class="rddlIcon"><!-- &nbsp; --></span>
    </span>
    <div class="rddlSlide" id="FrmDDL0_DropDown" style="display:none;">
        <div class="rddlPopup rddlPopup_SI">
            <ul class="rddlList">
                <li class="rddlItem">&nbsp;</li>
                <li class="rddlItem">X1</li>
                <li class="rddlItem">X2</li>
                <li class="rddlItem">X3</li>
                <li class="rddlItem  rddlItemSelected">X4</li>
            </ul>
        </div>
    </div>
<input id="FrmDDL0_ClientState" name="FrmDDL0_ClientState" type="hidden" autocomplete="off">
</div>

You can clearly see that the _ClientState control is not populated with the selected value even though the <li> item has the 'rddlItemSelected' class. For comparison this is what it looks like if I selected a value from the RadDropDownList from the UI.

<input id="FrmDDL0_ClientState" name="FrmDDL0_ClientState" type="hidden" autocomplete="off" value="{&quot;enabled&quot;:true,&quot;logEntries&quot;:[],&quot;selectedIndex&quot;:4,&quot;selectedText&quot;:&quot;X4&quot;,&quot;selectedValue&quot;:&quot;X4&quot;}">

So the question really becomes, when using the RadWizard and its back and forward buttons, how do I persist client selection on a dynamically created RadDropDownList

 

[Peter Milchev]

Hi Matthew,

The ClientState is not initially populated from the server-side. It is used to track user actions on the client, so it can send it back to the server, where they would be parsed and applied. 

That is the reason you see an empty client-state from the server, but populated when you interact with the control.

Usually, you should check the $create() statement for the control and the options passed there. It is usually located in one of the last script tags inside the <form>. Here is a sample DropDownList declaration and the generated $create() statement for it:

<telerik:RadDropDownList ID="RadDropDownList1" runat="server" RenderMode="Lightweight">
    <Items>
        <telerik:DropDownListItem Text="Item 1" />
        <telerik:DropDownListItem Text="Item 2" />
        <telerik:DropDownListItem Text="Item 3" />
        <telerik:DropDownListItem Text="Item 4" Selected="true" />
    </Items>
</telerik:RadDropDownList>

<script type="text/javascript">
//<![CDATA[
window.__TsmHiddenField = $get('RadScriptManager1_TSM');Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadAjaxManager, {"_updatePanels":"","ajaxSettings":[],"clientEvents":{OnRequestStart:"",OnResponseEnd:""},"defaultLoadingPanelID":"","enableAJAX":true,"enableHistory":false,"links":[],"styles":[],"uniqueID":"RadAjaxManager1","updatePanelsRenderMode":0}, null, null, $get("RadAjaxManager1"));
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadDropDownList, {"_selectedIndex":3,"_selectedText":"Item 4","_uniqueId":"RadDropDownList1","clientStateFieldID":"RadDropDownList1_ClientState","itemData":[{},{},{},{"selected":true}]}, null, null, $get("RadDropDownList1"));
});
//]]>
</script>

 

For the sake of testing, you can try with a static DropDownList and see if the selection would persist. 

Also, you should check if the event where you set the selection is too early. For example, if it is before the Page_Load, then you make a selection, but the ViewState is applied after it, so your changes are overwritten by the old values in the ViewState.

Regards,
Peter Milchev
Progress Telerik

[Matthew Bishop]

Thanks for your answer. My code is triggered by the RadWizard1_ActiveStepChanged event.

Instead I came up with this word around (The RadDropDownList is in a table so my workaround method returns a tablecell)

After creating and populating the DDL I call the below method which creates a hidden textbox ('hid' class is display:none) and adds a javascript event to populate the textbox.

c#

internal static TableCell CreatePairedDDLControls(RadDropDownList r)
    {
        TableCell tc = new TableCell();
        TextBox tb = new TextBox
        {
            ID = r.ID + "_htb",
            CssClass = "hid"
        };
        r.OnClientItemSelected = string.Format("PassDdlValueToTB", r.ID);
        if (r.SelectedValue != "") { tb.Text = r.SelectedValue; }
        tc.Controls.Add(r);
        tc.Controls.Add(tb);
        return tc;
    }

 

JS

function PassDdlValueToTB(sender, eventArgs) {
            var target = event.target || event.srcElement;
            var item = eventArgs.get_item();
            var parentId = target.parentElement.parentElement.parentElement.getAttribute("ID");
            parentId = parentId.replace("_DropDown", "_htb");
            document.getElementById(parentId).value = item.get_value();
        }

It may not be the best solution but it is fast and easily reusable and the resulting textboxes values can be accessed by using the

Request.Form["the dll id"].ToString();