Use RadToolTipManager with RadListboxItems

9 posts, 0 answers
  1. Fred Mare
    Fred Mare avatar
    36 posts
    Member since:
    Dec 2009

    Posted 15 Oct 2010 Link to this post

    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

     

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 20 Oct 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fred Mare
    Fred Mare avatar
    36 posts
    Member since:
    Dec 2009

    Posted 22 Oct 2010 Link to this post

    Dear Svetlina

    Thank you very much

    Fred
  5. Fred Mare
    Fred Mare avatar
    36 posts
    Member since:
    Dec 2009

    Posted 27 Oct 2010 Link to this post

    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
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Vatsal
    Vatsal avatar
    26 posts
    Member since:
    Oct 2010

    Posted 17 Nov 2010 Link to this post

    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,
     
  8. Vatsal
    Vatsal avatar
    26 posts
    Member since:
    Oct 2010

    Posted 19 Nov 2010 Link to this post

    Looks like, no one can solve my problem :(
    I am still waiting for soln of my problem...
  9. Fred Mare
    Fred Mare avatar
    36 posts
    Member since:
    Dec 2009

    Posted 19 Nov 2010 Link to this post

    Hi

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

    Fred
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 Nov 2010 Link to this post

    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

    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017