ToolTip Update in RadGrid

[avarndel]

I have a Dynamic tooltip in my RadGrid.  When I sort a column, how can I have the tooltip update?

[Iana Tsolova]

Hello avarndel,

Could you please elaborate more on your scenario? For instance:

• When (on which event) are you creating the dynamic tooltips?
• Is your grid ajaxified?

If you could send us a sample or at least the problematic page, this can help a lot in finding a resolution for you.

Greetings,
Iana
the Telerik team

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

[avarndel]

When I click on any of my columns to sort,  The tool tip data doesn't get updated.  Here is my code.   

ASPX:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="False" CodeFile="StaffByName.aspx.vb" Inherits="Staff_Staff" title="Yellow Pages" %>
<%@ MasterType VirtualPath="~/MasterPage.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">
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
               function HandleScrolling(e)
            {
              var grid = $find("<%=StaffGrid.ClientID %>");

              var scrollArea = document.getElementById("<%= StaffGrid.ClientID %>" + "_GridData");
             
              if(IsScrolledToBottom(scrollArea))
              {
                var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);
               
                //if the presently visible items are less than the entire source records count
                //trigger an ajax request to increase them
                if(currentlyDisplayedRecords < 100)
                {
                  $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords");
                }
              }
            }
            //this method calculates whether you have reached the bottom when dragging the vertical grid scroll
            function IsScrolledToBottom(scrollArea)
            {
                var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;
                return currentPosition == scrollArea.scrollHeight;
            }
                var timer = null;
                function KeyUp()  {
                    if (timer != null)
                    {
                      clearTimeout(timer);
                    }
                    timer = setTimeout(LoadTable,500);
                }

                function LoadTable()                {
                     $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("StaffGrid");
                }
                       </script>
    </telerik:RadCodeBlock>
    <div id="titleBar">Staff View</div><div style="float: right">
    <asp:Label ID="lblFilter" runat="server" Text="Search:" CssClass="fielddata"></asp:Label>
                <telerik:RadCombobox ID="ddlSearch" runat="server" Skin="Default">
                    <Items>
                        <telerik:RadComboBoxItem Text="Name" Value="StaffName" />
                        <telerik:RadComboBoxItem Text="Title" Value="Title" />
                        <telerik:RadComboBoxItem Text="Office" Value="Office" />
                        <telerik:RadComboBoxItem Text="Cost Center" Value="CostCenter" />
                    </Items>
                </telerik:RadCombobox><asp:TextBox ID="txtSearch" runat="server" OnTextChanged="txtSearch_TextChanged"></asp:TextBox>
                <asp:ImageButton ID="btnSearch" runat="server" ImageUrl="~/Images/FilterGo.gif"
                    BackColor="white" />
<asp:ImageButton ID="btnShowAll" runat="server" ImageUrl="~/Images/FilterCancel.gif" BackColor="white"
OnClick="btnShowAll_Click" /></div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
               <telerik:RadGrid ID="StaffGrid" runat="server" Width="97%"
            AllowPaging="True" PageSize="12" AllowSorting="True"
                                    OnNeedDataSource="StaffGrid_NeedDataSource"  GridLines="None"
                   DataSourceID="sdsStaffView" BackColor="White" ShowGroupPanel="True"  >
            <PagerStyle Mode="NumericPages" />
            <MasterTableView TableLayout="Fixed" AutoGenerateColumns="False"
                           DataSourceID="sdsStaffView" DataKeyNames="UserID"
                       allowmulticolumnsorting="True" AllowPaging="True">
                <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"
                               Visible="False" FilterImageToolTip="">
                           </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="StaffName" HeaderText="Name"
                               ReadOnly="True" SortExpression="StaffName" UniqueName="StaffName">
                           </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="Title" HeaderText="Title"
                               SortExpression="Title" UniqueName="Title">
                           </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="Ext" HeaderText="Ext" SortExpression="Ext"
                               UniqueName="Ext" ItemStyle-Height="15%" HeaderStyle-Width="15%">
                               <HeaderStyle Width="15%" />
                               <ItemStyle Height="15%" />
                           </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="IMInfo" HeaderText="IMInfo" ReadOnly="True"
                               SortExpression="IMInfo" UniqueName="IMInfo" Visible="False">
                           </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="CellPhone" HeaderText="CellPhone"
                               SortExpression="CellPhone" UniqueName="CellPhone" Visible="False">
                           </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="Office" HeaderText="Office"
                               SortExpression="Office" UniqueName="Office">
                           </telerik:GridBoundColumn>
                           <telerik:GridBoundColumn DataField="CostCenter" HeaderText="Cost Center"
                               SortExpression="CostCenter" UniqueName="CostCenter">
                           </telerik:GridBoundColumn>
                </Columns>
                       </MasterTableView>
            <ClientSettings>
                <ClientEvents OnScroll="HandleScrolling" />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" EnableVirtualScrollPaging="true"
                    SaveScrollPosition="True" scrollHeight="300px" FrozenColumnsCount="1"></Scrolling>
            </ClientSettings>
                   <FilterMenu EnableTheming="True">
                       <CollapseAnimation Duration="200" Type="OutQuint" />
                   </FilterMenu>
            </telerik:RadGrid>
                              </div>
            <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate"
                Position="TopCenter" Sticky="true" OffsetY="0" BackColor="#45473F"
                   BorderColor="#45473F" BorderWidth="0px"
                EnableTheming="True" OffsetX="50" ShowDelay="200" ShowEvent="OnClick">
            </telerik:RadToolTipManager>
            <asp:Repeater ID="repeater1" runat="server" DataSourceID="sdsStaffView" Visible="False">
                <ItemTemplate>
                    <div>
                        <asp:Label ID="lblName" runat="server"><%#Eval("UserID")%></asp:Label>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
            <asp:SqlDataSource ID="sdsStaffView" runat="server"
                ConnectionString="<%$ ConnectionStrings:AppConnectionString %>"
                SelectCommand="proc_xUserProfileStaffByNameView"
                SelectCommandType="StoredProcedure"></asp:SqlDataSource>
      </ContentTemplate>
    </asp:UpdatePanel>
   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="StaffGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="StaffGrid" LoadingPanelID="RadAjaxLoadingPanel1"/>                       
                        <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1"/> 
                    </UpdatedControls>
                    </telerik:AjaxSetting>
                 <telerik:AjaxSetting AjaxControlID="btnSearch">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="StaffGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
                             <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1"/> 
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                       </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25" >
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />
        </telerik:RadAjaxLoadingPanel>

</asp:Content>


ASPX.VB
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.Data.SqlClient
Imports System.IO
Partial Public Class Staff_Staff
    Inherits System.Web.UI.Page
    Dim count As Integer = 0
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Me.RadToolTipManager1.TargetControls.Clear()
            Dim expression As New GridSortExpression()
            expression.FieldName = "StaffName"
            expression.SortOrder = GridSortOrder.Ascending
            Me.StaffGrid.MasterTableView.SortExpressions.AddSortExpression(expression)
            Me.StaffGrid.MasterTableView.Rebind()

        End If
    End Sub
  
    Protected Sub RadToolTipManager1_AjaxUpdate(ByVal sender As Object, ByVal e As Telerik.Web.UI.ToolTipUpdateEventArgs)
        Me.UpdateToolTip(e.Value, e.UpdatePanel)
    End Sub
    Sub UpdateToolTip(ByVal elementID As String, ByVal panel As UpdatePanel)
        Dim ctrl As Control = Page.LoadControl("~\UserControls\StaffProfile.ascx")
        panel.ContentTemplateContainer.Controls.Add(ctrl)
        Dim details As StaffProfile = DirectCast(ctrl, StaffProfile)
        details.UserID = CType(elementID, Integer)
    End Sub
    Protected Sub StaffGrid_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles StaffGrid.ItemCommand
        If (e.CommandName = "Filter") Then
            For Each column As GridColumn In e.Item.OwnerTableView.Columns
                column.CurrentFilterValue = String.Empty
                column.CurrentFilterFunction = GridKnownFunction.NoFilter
            Next
        End If
    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)
                RadToolTipManager1.TargetControls.Add(target)
            End If
        End If
    End Sub
    Protected Sub StaffGrid_PageIndexChanged(ByVal source As Object, ByVal e As Telerik.Web.UI.GridPageChangedEventArgs) Handles StaffGrid.PageIndexChanged
        RadToolTipManager1.TargetControls.Clear()
    End Sub


    Protected Sub StaffGrid_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles StaffGrid.NeedDataSource
        Dim dt As New Data.DataTable()
        dt.Columns.Add("UserID", GetType(String))
        dt.Columns.Add("StaffName", GetType(String))
        dt.Columns.Add("Title", GetType(String))
        dt.Columns.Add("Ext", GetType(String))
        dt.Columns.Add("Office", GetType(String))
        dt.Columns.Add("CostCenter", GetType(String))

        Dim i As Integer = 0
        While i <= 800
            Dim dr As Data.DataRow = dt.NewRow()
            dr(0) = 123456
            dr(1) = "Name" + i.ToString
            dr(2) = "Title" + i.ToString
            dr(3) = "Ext" + i.ToString
            dr(4) = "Office" + i.ToString
            dr(5) = "CostCenter" + i.ToString

            dt.Rows.Add(dr)
            System.Math.Max(System.Threading.Interlocked.Increment(i), i - 1)
        End While

        StaffGrid.DataSource = dt

    End Sub
     Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
        StaffGrid.PageSize = 14 + StaffGrid.PageSize
        StaffGrid.Rebind()
    End Sub

    Protected Sub txtSearch_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles txtSearch.TextChanged
        Dim txt As TextBox = TryCast(DirectCast(sender, TextBox), TextBox)
        Dim list As RadComboBox = DirectCast(((txt.NamingContainer).FindControl("ddlSearch")), RadComboBox)

        Dim [option] As String
        If list.SelectedValue = "StaffName" OrElse list.SelectedValue = "Title" OrElse list.SelectedValue = "Office" OrElse list.SelectedValue = "CostCenter" Then
            [option] = " LIKE "
            '[option] = " = "
        Else
            [option] = " LIKE "

        End If

        Dim filterExpression As String

        If [option] = " = " Then
            filterExpression = "(" + list.SelectedValue + [option] + txt.Text + ")"
        Else
            filterExpression = "(" + list.SelectedValue + [option] + "'%" + txt.Text + "%'" + ")"
        End If

        StaffGrid.MasterTableView.FilterExpression = filterExpression
        StaffGrid.MasterTableView.Rebind()
    End Sub

    Protected Sub btnShowAll_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnShowAll.Click
        StaffGrid.MasterTableView.FilterExpression = ""
        StaffGrid.MasterTableView.Rebind()
    End Sub
End Class

[Iana Tsolova]

Hello avarndel,

Thank you for sending your code.

I prepared a sample project for you following your scenario. Please find it attached and try it on your end. Check if it works as desired and if I missed something from your logic. Let me know if any issues arise.

Kind regards,
Iana
the Telerik team

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

[avarndel]

your sample has the same problem.  When I sort a column, the tooltip doesn't pickup the correct userid.

[Iana Tsolova]

Hi avarndel,

It seems that we have some misunderstanding here. What is the value I should see as the UserID for all rows is 123456, and this is what comes from the datasource?

However I have modified the sample so it works even better now. Check it out and let me know how it goes.

Additionally, you can review this demo for updating RadToolTip TargetControls collection with AJAX for further information.

Best wishes,
Iana
the Telerik team

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