Use RadToolTipManager with RadListboxItems

[Fred Mare]

Hi

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

 

[Svetlina Anati]

Hello Fred Mare,

 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

[Fred Mare]

Dear Svetlina

Thank you very much

Fred

[Fred Mare]

Dear Svetlina

It works if I load the list on the page load but not when I populate the listbox from a combox select event.

Fred

[Svetlina Anati]

Hi Fred Mare,

 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.

Sincerely yours,
Svetlina
the Telerik team

[Vatsal]

Having the same problem. Please see below...

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

[Vatsal]

Looks like, no one can solve my problem :(
I am still waiting for soln of my problem...

[Fred Mare]

Hi

If you attach a sample app, I will see if I can help you.

Fred

[Svetlina Anati]

Hi Vatsal,

 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