How to show the full text for the selected item of RadComboBox

11 posts, 0 answers
  1. Ryan
    Ryan avatar
    3 posts
    Member since:
    May 2012

    Posted 07 Jul 2012 Link to this post

    Hi Telerik,

    I have some telerik RadComboBox controls in the template columns of the RadGrid. Let's say, if selecting the item from the RadComboBox and the length of the selected item is much longer than the width of that RadComboBox, how to show the full text for the selected item when user moving the mouse over the selected item of the RadComboBox?

    Looking forward to your reply.

  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 09 Jul 2012 Link to this post

    Hello Ryan,

    In order to achieve the desired functionality, you could use the OnSelectedIndexChanged event to set dynamically the tooltip of the control. Please consider the following approach:

    protected void OnSelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
       {
           (sender as RadComboBox).ToolTip = e.Text;
       }

    All the best,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Richa
    Richa avatar
    10 posts
    Member since:
    Jan 2014

    Posted 13 Mar 2014 Link to this post

    Hi,

    I am Facing The same problem.. The solution suggested by you fixed the problem in IE 8 and Chrome but it does not works in IE11.  RadComboBox length is according to the Longest String but still it is not showing the full text. Here is the Images of my combobox Before and after selctection of the items. Please reply Fast it is really urgent..
  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 17 Mar 2014 Link to this post

    Hello Richa,

    Would you provide us with the implementation of the RadComboBox, that you are using at your end? In addition, please specify the version of our controls that you are currently using.

    Regards,
    Nencho
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  6. Richa
    Richa avatar
    10 posts
    Member since:
    Jan 2014

    Posted 19 Mar 2014 in reply to Nencho Link to this post

    Hi nancho,

    I have applied the Following code. It works perfect in IE 8 but it does not work in Chrome browser. I am showing the Combobox in Modalpopup. In Chrome browser The Dropdown width is increasing by selecting the option from the combobox.

    Server side code:

      protected void OnSelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            (sender as RadComboBox).ToolTip = e.Text;
        }

    Client side code

    <script type="text/javascript">

            function OnClientDropDownClosing(sender, eventArgs) {
                var currentWidth = $telerik.$(sender.get_dropDownElement()).width() - 10;
                sender.get_inputDomElement().style.width = currentWidth + "px";
            }
        </script>

     <div style="margin-top: 1px;">
                                        <div style="text-align: right; width: 120px; float: left;">
                                            <asp:Label ID="lblEventName" runat="server" Width="90" Text="Event Name:"></asp:Label>
                                        </div>
                                        <div style="width: 300px; float: left; margin-left: 10px; margin-right: 5px; margin-top: 4px;
                                            position: relative;">
                                            <telerik:RadComboBox ID="cmbEventName" ClientIDMode="Static"  runat="server"
                                                HighlightTemplatedItems="true" ZIndex="100000000" EmptyMessage="Select Event Name"
                                                Skin="Office2007" Width="100%" OnClientDropDownClosing="OnClientDropDownClosing" OnSelectedIndexChanged="OnSelectedIndexChanged"/>
                                            <asp:Label float="right" ID="Label9" runat="server" ForeColor="Red" Text="*" Width="5px"
                                                CssClass="ReqStyle"></asp:Label>
                                            
                                        </div>
                                        <div style="clear: both;">
                                        </div>
                                    </div>
     Thanks

     Richa






  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Mar 2014 in reply to Richa Link to this post

    Hi Richa,

    In order to fire the OnSelectedIndexChanged event of RadComboBox please try to set the AutoPostBack property to true. I tried your code and its working fine for me. Please try this  modification and let me know if you have any concern.

    Thanks,
    Princy.
  8. Richa
    Richa avatar
    10 posts
    Member since:
    Jan 2014

    Posted 21 Mar 2014 in reply to Princy Link to this post

    Hi Princy,

    Thanks For the reply. Autopostback property does not work for me. Because i am displaying this combobox in modalpopup which is showing using jquery. If i use auto Postback property set to True then my modalpopup  disappers. 

    Thanks
     Richa
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Mar 2014 in reply to Richa Link to this post

    Hi Richa,

    Please have a look into the sample code snippet which works fine at my end. Please provide your full code if it doesn't help.

    ASPX:
    <telerik:RadWindow ID="RadWindow1" runat="server">
        <ContentTemplate>
            <div style="margin-top: 1px;">
                <div style="text-align: right; width: 120px; float: left;">
                    <asp:Label ID="lblEventName" runat="server" Width="90" Text="Event Name:"></asp:Label>
                </div>
                <div style="width: 300px; float: left; margin-left: 10px; margin-right: 5px;                             margin-top: 4px; position: relative;">
                    <telerik:RadComboBox ID="cmbEventName" ClientIDMode="Static"runat="server"                           HighlightTemplatedItems="true"  ZIndex="100000000"                                             EmptyMessage="Select Event Name" Skin="Office2007" Width="100%"                                 AutoPostBack="true"                                                                           OnClientDropDownClosing="OnClientDropDownClosing"                                             OnSelectedIndexChanged="OnSelectedIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem Text="HIPAA Training for Everyone" />
                            <telerik:RadComboBoxItem Text="OSHA Annual Training" />
                            <telerik:RadComboBoxItem Text="Harasment prevention training for Non-Managers" />
                            <telerik:RadComboBoxItem Text="Harasment prevention training for Managers" />
                        </Items>
                    </telerik:RadComboBox>
                    <asp:Label float="right" ID="Label9" runat="server" ForeColor="Red" Text="*"                           Width="5px" CssClass="ReqStyle"></asp:Label>
                </div>
                <div style="clear: both;">
                </div>
            </div>
        </ContentTemplate>
    </telerik:RadWindow>

    JavaScript:
    <script type="text/javascript">
        function pageLoad() {
            var win = $find("<%=RadWindow1.ClientID %>");
            win.show();
        }
        function OnClientDropDownClosing(sender, eventArgs) {
            var currentWidth = $telerik.$(sender.get_dropDownElement()).width() - 10;
            sender.get_inputDomElement().style.width = currentWidth + "px";
        }
    </script>

    C#:
    protected void OnSelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        (sender as RadComboBox).ToolTip = e.Text;
    }

    Thanks,
    Princy.
  10. Richa
    Richa avatar
    10 posts
    Member since:
    Jan 2014

    Posted 24 Mar 2014 in reply to Princy Link to this post

    Hi Princy,

    The Dropdown works perfect if i removed Form decorator Or set DecoratedControls to None.

    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="None"
            Skin="Default"></telerik:RadFormDecorator>

    Now Combobox show full text of the selected option. and it works in all browser IE 8, IE 11 and chrome. 

    Thanks For The Reply.

  11. Richa
    Richa avatar
    10 posts
    Member since:
    Jan 2014

    Posted 24 Mar 2014 in reply to Princy Link to this post

    Princy,

    I have already tried this code it works fine in IE 8 and IE 11 but it does not works in Chrome. in chrome if you select any option from the combo box it get increased  with 10 px itself. But the problem is resolved by setting the removing the form decorator.


    Thanks
    Richa
  12. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 24 Mar 2014 Link to this post

    Hello Richa,

    I have review the provided information, regarding the experienced issue. Could you specify if you are attempting to reset the width of the ComboBox to the current one, in order to try to overcome the faced issue? The control width is expanded, after the execution of the logic in the OnClientDropDownClosing, because you are getting only the width of the Input element of the ComboBox, but this is not the total width, since there are additional elements, which are parts of he ComboBox.

    However, the problem demonstrated in the previosly provided images seems to be related with the Text of the Item in question - Harasment prevention training for Non-Managers. As I can see there seems to be a blank spaces appended to the end of the Item's text. Please make sure that the Text is trimmed before it is added to the ItemsCollection of the RadComboBox.

    Regards,
    Nencho
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

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