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.
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.
10 Answers, 1 is accepted
0
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:
All the best,
Nencho
the Telerik team
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.
0

Richa
Top achievements
Rank 1
answered on 13 Mar 2014, 09:01 AM
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..
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..
0
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
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.
0

Richa
Top achievements
Rank 1
answered on 20 Mar 2014, 04:54 AM
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
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
0

Princy
Top achievements
Rank 2
answered on 20 Mar 2014, 08:28 AM
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.
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.
0

Richa
Top achievements
Rank 1
answered on 21 Mar 2014, 09:01 AM
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
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
0

Princy
Top achievements
Rank 2
answered on 21 Mar 2014, 11:29 AM
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:
JavaScript:
C#:
Thanks,
Princy.
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.
0

Richa
Top achievements
Rank 1
answered on 24 Mar 2014, 06:35 AM
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.
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.
0

Richa
Top achievements
Rank 1
answered on 24 Mar 2014, 06:39 AM
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
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
0
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
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.