I am trying to use the radToolTipManager with a radlistbox. Is it possible to use the manager to display a tooltip for each radlisboxitem
Here is my code that I use to add the items to the manager. My OnAjaxUpdate event wont fire att all.
protected
void
chkListRoles_ItemDataBound(
object
sender, RadListBoxItemEventArgs e)
{
if
(e.Item
is
RadListBoxItem)
{
(e.Item
as
RadListBoxItem).Attributes[
"id"
] = Guid.NewGuid().ToString();
string
id = (e.Item
as
RadListBoxItem).Attributes[
"id"
];
this
.radToolTipManager1.TargetControls.Add(id, (e.Item
as
RadListBoxItem).Value.ToString(),
true
);
}
}
Thank you
Fred
8 Answers, 1 is accepted
To tooltipify the items you should use the ClientID as shown below:
protected
void
chkListRoles_ItemDataBound(
object
sender, RadListBoxItemEventArgs e)
{
if
(e.Item
is
RadListBoxItem)
{
this
.radToolTipManager1.TargetControls.Add(e.Item.ClientID, (e.Item
as
RadListBoxItem).Value.ToString(),
true
);
}
}
Otherwise you set the new id for the tooltip manager but the items have their own id and it overrides yours and you end up with one ids in the TargetControls collection and other ids actually set for items.
I hope that my reply is helpful, let me know how it goes.
Best wishes,
Svetlina
the Telerik team
Thank you very much
Fred
It works if I load the list on the page load but not when I populate the listbox from a combox select event.
Fred
Do you by any chance use AJAX when populating the list through the combo box? If so, please note that you should also ajaxify the tooltip manager and clear the target controls collection first. In this manner you will ensure that when the targets change, the collection will also be updated.
In case you need further assistance, please share some fully runnable reproduction code here and I will built up a sample demo based on it and I will do my best to help.
Svetlina
the Telerik team
<
telerik:RadAjaxManager
ID
=
"AjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"btnGetDlls"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox2"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadToolTipManager1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"lblMessage"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"ddlClients"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox2"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"lblMessage"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadToolTipManager1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"btnSave"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox2"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"lblMessage"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"btnCancel"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox2"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"lblMessage"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadListBox1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox2"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadToolTipManager1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadListBox2"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox2"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadToolTipManager1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
table
width
=
"800px"
cellpadding
=
"0"
cellspacing
=
"0"
border
=
"0"
>
<
tr
>
<
td
width
=
"200px"
align
=
"left"
valign
=
"middle"
>
Select a client:
</
td
>
<
td
width
=
"600px"
align
=
"left"
valign
=
"middle"
>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel2"
runat
=
"server"
>
<
telerik:RadComboBox
ID
=
"ddlClients"
runat
=
"server"
AutoPostBack
=
"true"
OnSelectedIndexChanged
=
"DDLCLients_SelectedIndexChanged"
Width
=
"400px"
DataTextField
=
"CLIENT_NAME"
DataValueField
=
"CLIENT_ID"
>
</
telerik:RadComboBox
>
</
telerik:RadAjaxPanel
>
</
td
>
</
tr
>
<
tr
>
<
td
width
=
"200px"
align
=
"left"
valign
=
"middle"
>
</
td
>
<
td
width
=
"600px"
align
=
"left"
valign
=
"middle"
>
<
asp:Button
ID
=
"btnGetDlls"
runat
=
"server"
Text
=
"Get Dlls"
Width
=
"200px"
OnClick
=
"GetDlls_Click"
/><
br
/>
<
asp:Label
ID
=
"lblMessage"
runat
=
"server"
ForeColor
=
"Red"
></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"2"
>
<
telerik:RadToolTipManager
ID
=
"RadToolTipManager1"
OffsetY
=
"-1"
HideEvent
=
"ManualClose"
Width
=
"250"
Height
=
"350"
runat
=
"server"
RelativeTo
=
"Element"
Position
=
"MiddleRight"
>
</
telerik:RadToolTipManager
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"2"
>
<
span
>Please select the required Dlls for Client:<
br
/>
(You can drag and drop or use arrows).</
span
><
br
/>
<
table
width
=
"700px"
cellpadding
=
"0"
cellspacing
=
"0"
border
=
"0"
>
<
tr
>
<
th
width
=
"350px"
align
=
"left"
valign
=
"top"
>
Available Dlls
</
th
>
<
th
width
=
"350px"
align
=
"left"
valign
=
"top"
>
Selected Dlls
</
th
>
</
tr
>
<
tr
>
<
td
width
=
"350px"
align
=
"left"
valign
=
"top"
>
<
telerik:RadListBox
ID
=
"RadListBox1"
runat
=
"server"
Width
=
"300px"
Height
=
"250px"
SelectionMode
=
"Single"
AllowTransfer
=
"true"
TransferToID
=
"RadListBox2"
AutoPostBackOnTransfer
=
"true"
AllowTransferDuplicates
=
"false"
ButtonSettings-ShowTransferAll
=
"false"
TransferMode
=
"Copy"
AllowReorder
=
"false"
AutoPostBackOnReorder
=
"false"
EnableDragAndDrop
=
"false"
OnItemDataBound
=
"RadListBox1_ItemDataBound"
>
</
telerik:RadListBox
>
<
td
width
=
"350px"
align
=
"left"
valign
=
"top"
>
<
telerik:RadListBox
ID
=
"RadListBox2"
runat
=
"server"
Width
=
"300px"
Height
=
"250px"
AllowTransferDuplicates
=
"false"
SelectionMode
=
"Single"
AllowReorder
=
"false"
AutoPostBackOnReorder
=
"false"
EnableDragAndDrop
=
"false"
TransferMode
=
"Move"
>
</
telerik:RadListBox
>
</
td
>
</
tr
>
<
tr
>
<
td
width
=
"350px"
align
=
"left"
valign
=
"top"
>
</
td
>
<
td
width
=
"350px"
align
=
"left"
valign
=
"top"
>
</
td
>
</
tr
>
<
tr
>
<
td
width
=
"350px"
align
=
"left"
valign
=
"top"
>
<
asp:Button
ID
=
"btnSave"
runat
=
"server"
Text
=
"Save"
Width
=
"200px"
OnClick
=
"Save_Click"
/>
</
td
>
<
td
width
=
"350px"
align
=
"left"
valign
=
"top"
>
<
asp:Button
ID
=
"btnCancel"
runat
=
"server"
Text
=
"Cancel"
Width
=
"200px"
OnClick
=
"Cancel_Click"
/>
</
td
>
</
tr
>
</
table
>
</
td
>
</
tr
>
</
table
>
Below is C# code...
protected
void
RadListBox1_ItemDataBound(
object
sender, RadListBoxItemEventArgs e)
{
string
tooltip;
tooltip = String.Format(@"Assembly Name: {0}<br/>
Assembly Location: {1}<br/>
Type Name: {2}<br/>
Is Post Process: {3}<br/>
Enabled: {4} <br/>", ((NewCustomerSetup.DataAccess.DLL)(e.Item.DataItem)).ASSEMBLY_NAME, ((NewCustomerSetup.DataAccess.DLL)(e.Item.DataItem)).ASSEMBLY_LOCATION, ((NewCustomerSetup.DataAccess.DLL)(e.Item.DataItem)).TYPE_NAME,
((NewCustomerSetup.DataAccess.DLL)(e.Item.DataItem)).IS_POST_PROCESS.ToString(), ((NewCustomerSetup.DataAccess.DLL)(e.Item.DataItem)).ENABLED.ToString());
//RadToolTipManager1.TargetControls.Add(e.Item.ClientID, tooltip, true);
RadToolTipManager1.TargetControls.Add(e.Item.ClientID,
"Sample tooltip"
,
true
);
}
I was getting some javascript error when I was trying to set html text as value of target control then I put simple text but still not able to see the tooltip for each item. My actual requirement is to show some rich html tooltip for each listbox iteam...
Regards,
I am still waiting for soln of my problem...
If you attach a sample app, I will see if I can help you.
Fred
I examined your code and I noticed the following:
1) The string you set when adding the target control is not teh tooltip content and it will not be automatically shown in teh tooltip. This is designed to be a primary key to extract the real rich HTML content and this is done wither in the OnAjaxUpdate event:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/loadondemand/defaultcs.aspx
or through a WebService:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/webservice/defaultcs.aspx
2) You never update the tooltip manager through AJAX and you never clear its TargetControls collection - please note, that this control is like every other control and you should take care of updating it when related controls are updated, clearing the collection when needed, etc. A sample demo related to this is available below:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx
I also stronlgly recommend to examine the other demos in more details to get a better understandiong how the RadTooltip and radTooltipmanager controls work.
On a side note, when you install RadControls, our online examples projects are automatically installed on your computer and you can not only examine their full source code, but also extend them further in order to meet your requirements.
You can open the demos from here:
Start\Programs\Telerik\RadControls for ASPNET AJAX\Open Sample WebSite In VisualStudio
The actual location on your hard disk is the following one:
C:\Program Files\Telerik\RadControls for ASPNET AJAX \Live Demos
I hope that this information is helpful.
Best wishes,
Svetlina
the Telerik team