Allow user to clear the Combo Box and show the empty message

4 posts, 0 answers
  1. John
    John  avatar
    2 posts
    Member since:
    May 2013

    Posted 03 Mar 2015 Link to this post

    I have multiple RadComboBox controls on a page with an empty message. They work great until a user accidentally selects an item and is unable to clear the item so that it shows the empty message again.  As soon as the user leaves the control, it shows the last selection they had.  I would prefer that a user could press the delete or backspace button and have the selection show the empty message as if they had not made a selection.  How do I go about doing that?
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 06 Mar 2015 Link to this post

    Hello John,

    If the RadComboBox is in ReadOnly mode, the desired functionality could not be achieved as there is no text that could be altered in the input of the control. In this case, I would suggest you to use the DefaultItem of the RadComboBox. Thus you will allow the end user to select it again if he wants to undo his selection.

    Here you can find more information on the DefaultItem:

    http://www.telerik.com/help/aspnet-ajax/combobox-items-default-item.html

    However, if the RadComboBox has is AllowCustomText property set to true, the EmptyMessage should appear, once the text from the input is deleted.

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John  avatar
    2 posts
    Member since:
    May 2013

    Posted 08 Mar 2015 in reply to Nencho Link to this post

    The RadComboBox is not set to 'ReadOnly', that wouldn't make sense given the context of my example.  Setting 'AllowCustomText' acts like it allows users to enter whatever they want although I suppose I could write some code to force it to come from the list. 

    The default item actually poses as an item, which works but is not a very elegant solution.
  5. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 11 Mar 2015 Link to this post

    Hello John,

    Just to make sure that we are on the same page - the ReadOnly state of the RadComboBox is not disabled state or unavailable for selection. The ReadOnly state would mean that the control does not allow custom text, which would happen if you set the AllowCustomText property to true.

    However, you can implement a custom solution for achieving the desired functionality. You can handle the OnClientLoad client-side event of the control in the following manner:

    <telerik:RadComboBox runat="server" ID="Combobox1" EmptyMessage="Select" OnClientLoad="onClientLoad">
              <Items>
                  <telerik:RadComboBoxItem Text="Item 1" />
                  <telerik:RadComboBoxItem Text="Item 2" />
                  <telerik:RadComboBoxItem Text="Item 3" />
                  <telerik:RadComboBoxItem Text="Item 4" />
                  <telerik:RadComboBoxItem Text="Item 5" />
              </Items>
          </telerik:RadComboBox>

    <script>
                function onClientLoad(sender) {
                    $telerik.$(".rcbInput").on('keyup', function (e) {
                        if (e.keyCode == 46) {
                            sender.clearSelection();
                        }
                    })
                }
            </script>

    With the above demonstrated approach, you can use the Delete button, in order to clear the selection of the control.

    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top