Tooltip with Rad Grid

[avarndel]

I'm having a difficult time understanding how to correctly impletment a tooltip on a RadGrid "onRowMouseOver" or "OnRowSelect".  I'm find that the documentation is hard to follow and confusing.  What I need to do is on a MouseOver or RowSelect in a grid display a tool tip.  However, the data is dynamic and depends on the UserID of that row.  Based on that userid, I will call a store Procedure that will have the data that I need to display in the tool tip.
I also reviewed the documentation and on line examples.  Very Confusing.

I'm using the latest on the AJAX controls in IE 7 and Visual Studio 2008
So Far I have a ToolTipManager on my page along with the grid...


     <telerik:RadToolTipManager
                        AutoTooltipify="False"
                        ID="GridRadToolTipManager"
                        runat="server"
                        ShowEvent="OnClick"
                        Position="BottomRight"
                        ShowDelay="100"
                        Skin="Web20"
                        Width="200px" style="display: none;"
                        >
                        <TargetControls>
                            <telerik:ToolTipTargetControl IsClientID="false" TargetControlID="StaffGrid" Value="" />
                        </TargetControls>
                                          </telerik:RadToolTipManager>
                </ContentTemplate>
                          <Triggers>
                               <asp:AsyncPostBackTrigger ControlID="StaffGrid" EventName="Load" />
                           </Triggers>
            </asp:UpdatePanel>


Thanks for your help...

[Svetlina Anati]

Hi Avarndel,

When you set the target control in this way, you actually assign only one tooltip for the whole grid control. I am also confused by the fact that you want the tooltip to show on mouse over event and you have set the RadToolTipManager's ShowEvent to OnClick.

You can find a demo which shows how to tooltipify a row here. You can examine the whole source code of the demo in the following location:

Another option is to handle the client onclick event and create the tooltips there as shown here.

In case this does not help, please open a new support ticket and provide a fully working project, including a database, which shows an alert on mouse over and alerts the ClientID of the item you want to tooltipify. We will modify it for you to use the RadToolTip instead of alert.


Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[avarndel]

Thanks for your reply.  Which is best to use when the content in the tooltip needs to be dynamic?

tx
Annette

[Svetlina Anati]

Hi Avarndel,

I recommend to use the RadToolTipManager in this case and load the content on demand by using the OnAjaxUpdate event or via WebService.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[avarndel]

Everytime I think I get it.. I don't.  I have the RadToolManager working on mouse over of a grid row.  However,  I'm not certain, how to get the UserID of that row and display the UserControl..

Here is what I have:

ASPX: page

<%

@ Page Language="VB" MasterPageFile="~/MasterPage3.master" AutoEventWireup="false" CodeFile="StaffByName.aspx.vb" Inherits="Staff_Staff" title="Yellow Pages" %>

<%

@ MasterType VirtualPath="~/MasterPage3.master" %>

<%

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<%

@ Register Src="~/UserControls/StaffProfile.ascx" TagName="StaffProfile" TagPrefix="uc1" %>

<

asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server"><br /><asp:Button ID="btnCreateProfile" runat="server" Text="Create Staff Profile" CssClass="mybutton" /><br /><asp:UpdatePanel ID="RadGridUpdatePanel" runat="server" UpdateMode="Conditional"><ContentTemplate><telerik:RadGrid ID="StaffGrid" runat="server" PageSize="20" AllowPaging="True" AllowSorting="True" Skin="Default" DataSourceID="sdsStaffView" GridLines="None"><ClientSettings EnableRowHoverStyle="true"><Selecting AllowRowSelect="True" />

</ClientSettings>
<MasterTableView DataKeyNames="UserID" autogeneratecolumns="False">
<RowIndicatorColumn>
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>

<telerik:GridBoundColumn DataField="UserID" DataType="System.Int64" HeaderText="UserID"

ReadOnly="True" SortExpression="UserID" UniqueName="UserID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="UserName" DataType="system.string" HeaderText="UserName"

SortExpression="UserName" UniqueName="UserName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Title" DataType="system.int32" HeaderText="Title"

SortExpression="Title" UniqueName="Title">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Ext" DataType="system.datetime" HeaderText="Ext"

SortExpression="Ext" UniqueName="Ext">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CostCenter" DataType="system.datetime" HeaderText="CostCenter"

SortExpression="CostCenter" UniqueName="CostCenter">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Office" DataType="system.datetime" HeaderText="Office"

SortExpression="Office" UniqueName="Office">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"

RelativeTo="Element" Width="350px" Height="250px" Position="BottomLeft" Sticky="true"

Title="Staff Profile" Skin="Web20">

<TargetControls>

<telerik:ToolTipTargetControl TargetControlID="StaffGrid" Value="UserID" />

</TargetControls>

</telerik:RadToolTipManager>

</ContentTemplate>

</asp:UpdatePanel>

<%

-- </telerik:RadPane>

</telerik:RadSplitter>--

%>

<asp:SqlDataSource ID="sdsStaffView" runat="server"

ConnectionString="<%$ ConnectionStrings:AppConnectionString %>"

SelectCommand="proc_xUserProfileStaffByNameView"

SelectCommandType="StoredProcedure"></asp:SqlDataSource>

<asp:SqlDataSource ID="sdsEmployees" runat="server"

ConnectionString="<%$ ConnectionStrings:AppConnectionString %>"

SelectCommand="proc_xUserProfileLoadAll"

SelectCommandType="StoredProcedure"></asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:AppConnectionString %>"

SelectCommand="proc_xUserProfileStaffProfileView" SelectCommandType="StoredProcedure">

<SelectParameters>

<asp:ControlParameter ControlID="StaffGrid" Name="UserID" PropertyName="SelectedValue"

Type="Int64" />

</SelectParameters>

</asp:SqlDataSource>

</asp:Content>

Staff CodeBehind  ASPX.VB

Protected Sub RadToolTipManager1_AjaxUpdate(ByVal sender As Object, ByVal e As Telerik.Web.UI.ToolTipUpdateEventArgs) Handles RadToolTipManager1.AjaxUpdate

Dim currentRow As DataRowView = DirectCast(sender.Item.DataItem, DataRowView)

Me.RadToolTipManager1.TargetControls.Add(currentRow.Row("UserID").ToString(), True)
Session("UserID") = currentRow.Row("UserID")

End Sub

User Control Page

<%

@ Control Language="VB" AutoEventWireup="false" CodeFile="StaffProfile.ascx.vb" Inherits="UserControls_StaffProfile" %>

<span class="StaffHeader">Staff Profile</span>

<

asp:Repeater ID="Repeater1" runat="server" DataSourceID="sdsStaffProfile"><ItemTemplate><fieldset class="StaffInfo"><div class="tooltipHeader" style="color: #6788be; font-weight: bold;">Name: <%#Eval("UserName")%></div>

<div class="tooltipHeader">Title: <%#Eval("Title")%></div>

<div class="tooltipHeader">Ext: <%#Eval("Ext")%></div>

<div class="tooltipHeader">Office: <%#Eval("Office")%></div>

<div class="tooltipHeader">Office Phone: <%#Eval("OfficePhone")%></div>

<div class="tooltipHeader">Cost Center: <%#Eval("CostCenter")%></div>

<div class="tooltipHeader">Supervisor: <%#Eval("Supervisor")%></div>

</fieldset></ItemTemplate></asp:Repeater><asp:SqlDataSource ID="sdsStaffProfile" runat="server" ConnectionString="<%$ ConnectionStrings:AppConnectionString %>" SelectCommand="proc_xUserProfileStaffProfileView" SelectCommandType="StoredProcedure"><SelectParameters><asp:SessionParameter Name="UserID" SessionField="UserID" Type="Int64" /></SelectParameters></asp:SqlDataSource>

[Svetlina Anati]

Hello Avarndel,

I suggest to examine the online demos which I mentioned in my previous post. Please, also note, that the OnAjaxUpdate event is used for loading the content (your User Control) and not for populating the RadToolTipManager's TargetControls collection.

You can add the target controls in the RadGrid's Item_DataBound event as shown in the provided demos.


All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[avarndel]

I'm looking at the links you sent me.  which I looked at before and is making no sense to me. 

I'm getting the DataKey for each line and adding the TargetControl information in the RadGrid_Item Databound

However, in the example is it using a control that I can't find so I understand how your getting the information.

Where is this control Dim hpAddProducts As Control = e.Item.FindControl("hlAddProducts")

in the following example: http://www.telerik.com/demos/aspnet/prometheus/Controls/Examples/Integration/ToolTipGrid/DefaultCS.aspx?product=grid

[avarndel]

I have to say,  I agree with folks saying that the documentation on the new RadControls is not up to par.  The documentation on the old version was great.  I was able to actually use the sample code and it worked and I understood how it work.  This is not the case with this new version.

So far I have gone back and forth with the forum and I'm very frustrated.  I've looked at the samples and tried to implement them.  However, there is one sample that is missing a control that is referenced in the code behind that doesn't exist.

I'm still having issues implementing a Dynamic RadToolTip for my RadGrid.
I have it loading, however, the data inside the tooltip is not changing when onmouseover of the grid row has changes.

Here is my ASPX Code:

<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
                        <br />
         <asp:Button ID="btnCreateProfile" runat="server" Text="Create Staff Profile" CssClass="mybutton"  />
         <br />
                <asp:UpdatePanel ID="RadGridUpdatePanel" runat="server" UpdateMode="Conditional">
                           <ContentTemplate>
                    <telerik:RadGrid ID="StaffGrid" runat="server" PageSize="20" AllowPaging="True" AllowSorting="True"
                                   Skin="Default"  DataSourceID="sdsStaffView" GridLines="None">
                        <ClientSettings EnableRowHoverStyle="true">
                            <Selecting AllowRowSelect="True" />
                        </ClientSettings>
                        <MasterTableView  DataKeyNames="UserID" autogeneratecolumns="False">
                            <RowIndicatorColumn>
                                <HeaderStyle Width="20px" />
                            </RowIndicatorColumn>
                            <ExpandCollapseColumn>
                                <HeaderStyle Width="20px" />
                            </ExpandCollapseColumn>
                            <Columns>
                                <telerik:GridBoundColumn DataField="UserID" DataType="System.Int64" HeaderText="UserID"
                                    ReadOnly="True" SortExpression="UserID" UniqueName="UserID">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="UserName" DataType="system.string" HeaderText="UserName"
                                    SortExpression="UserName" UniqueName="UserName">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Title" DataType="system.int32" HeaderText="Title"
                                    SortExpression="Title" UniqueName="Title">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Ext" DataType="system.datetime" HeaderText="Ext"
                                    SortExpression="Ext" UniqueName="Ext">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="CostCenter" DataType="system.datetime" HeaderText="CostCenter"
                                    SortExpression="CostCenter" UniqueName="CostCenter">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Office" DataType="system.datetime" HeaderText="Office"
                                    SortExpression="Office" UniqueName="Office">
                                </telerik:GridBoundColumn>
                            </Columns>
                        </MasterTableView>                     
                    </telerik:RadGrid>
                     <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server"
                                   OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" Width="350px" Height="250px" Position="Center" Sticky="true"
           Title="Staff Profile" Skin="Default">
                                                                                         </telerik:RadToolTipManager>
                </ContentTemplate>
                             </asp:UpdatePanel>
                         <asp:SqlDataSource ID="sdsStaffView" runat="server"
                ConnectionString="<%$ ConnectionStrings:AppConnectionString %>"
                SelectCommand="proc_xUserProfileStaffByNameView"
                SelectCommandType="StoredProcedure">
                </asp:SqlDataSource>    
                                          </asp:Content>

ASPX.VB Code:

Imports System
Imports System.Collections
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports Telerik.Web.UI
Imports System.IO

Partial Public Class Staff_Staff
    Inherits System.Web.UI.Page
    Private UserIDs As New Hashtable()

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not Page.IsPostBack Then
            Me.RadToolTipManager1.TargetControls.Clear()
        End If
    End Sub
    Protected Sub RadToolTipManager1_AjaxUpdate(ByVal sender As Object, ByVal e As Telerik.Web.UI.ToolTipUpdateEventArgs) Handles RadToolTipManager1.AjaxUpdate
        Me.UpdateToolTip(e.Value, e.UpdatePanel)
    End Sub
    Sub UpdateToolTip(ByVal elementID As String, ByVal panel As UpdatePanel)
        Session("UserID") = elementID
        Dim ctrl As Control = Page.LoadControl("~\UserControls\StaffProfile.ascx")
        panel.ContentTemplateContainer.Controls.Add(ctrl)
    End Sub
    Protected Sub StaffGrid_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles StaffGrid.ItemDataBound
        If e.Item.ItemType = GridItemType.AlternatingItem OrElse e.Item.ItemType = GridItemType.Item Then
            Dim requestRowView As DataRowView = TryCast(e.Item.DataItem, DataRowView)
            If requestRowView IsNot Nothing Then
                Dim reqID As Integer = CInt(requestRowView("UserID"))
                Dim gridItem As GridDataItem = TryCast(e.Item, GridDataItem)
                Dim target As New ToolTipTargetControl(gridItem.ClientID, CType(reqID, String), True)
                'Me.RadToolTipManager1.TargetControls.Add(StaffGrid.ClientID, currentRow.Row("UserID").ToString())
                RadToolTipManager1.TargetControls.Add(target)
            End If
        End If
    End Sub
End Class

[Svetlina Anati]

Hello Avarndel,

I understand that not having all the example's code directly published on the site may not help understand its complete logic and that is why when you install the RadControls, the full source code of all examples is installed on your local disk. Despite the demos are intended to be simple enough just to show a certain functionality, some of them include more code, which is general ASP.NET knowledge and depends on the developer decision.

You can not only open the demos, but also extend them further in order to meet your requirements, 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

As far as I can see form your code, you only load the user control and you do not provide a unique identifier, which determines the particular record from the database you want to extract. The RadToolTipManager is not responsible for this functionality but for showing the RadToolTip and performing the AJAX request. The logic of the user control is up to the developer to organize it in the desired way and it does not depend on the RadToolTipManager control.

In our online example this is done by implementing a public property in the user control and it is set in the AJAx update handler. You can examine it in the full source as explained above and in case it fits your scenario, you can use the same approach.


Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.