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

[Ryan]

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.

[Nencho]

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

[Richa]

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..

[Nencho]

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

 

 

[Richa]

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

[Princy]

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.

[Richa]

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

[Princy]

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.

[Richa]

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.

[Richa]

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

[Nencho]

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