Use value as displayed selected value

[Gerry]

Hi,

Is there a way to make the value the displayed selected value and still have the drop down show the text when selecting. My objective is to show a short version of the full description (e.g. TBA = To be announced). So when you open the drop down you see "To be Announced" and but the selection shows TBA. The reason is that we have limited space on the form and we want to keep the fields fairly narrow.

 

Thanks!

[Aneliya Petkova]

Hello Gerry,

Yes, this is possible. Please try the following:

<form id="form1" runat="server">
    <div style="position: absolute; top: 500px;">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadDropDownList ID="RadDropDownList1" runat="server" RenderMode="Classic"
            OnClientItemSelected="OnClientItemSelected" OnClientDropDownClosed="OnClientDropDownClosed"
            TabIndex="1" DefaultMessage="Select..." Skin="Bootstrap">
            <Items>
                <telerik:DropDownListItem Text="item 1" Value="value 1" />
                <telerik:DropDownListItem Text="item 2" Value="value 2" />
                <telerik:DropDownListItem Text="item 3" Value="value 3" />
                <telerik:DropDownListItem Text="item 4" Value="value 4" />
                <telerik:DropDownListItem Text="item 5" Value="value 5" />
            </Items>
        </telerik:RadDropDownList>

        <script type="text/javascript">
            var itemValue = "";
            function OnClientItemSelected(sender, eventArgs) {
                itemValue = eventArgs.get_item().get_value();
            }

            function OnClientDropDownClosed(sender, eventArgs) {
                sender.get_textElement().textContent = itemValue;
            }
        </script>
    </div>
</form>

Regards,
Aneliya Petkova
Telerik