Use value as displayed selected value

2 posts, 1 answers
  1. Gerry
    Gerry avatar
    26 posts
    Member since:
    Nov 2010

    Posted 13 Apr 2015 Link to this post

    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!

  2. Answer
    Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 14 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top