This is a migrated thread and some comments may be shown as answers.

Tooltip does not update on radgrid rebind

2 Answers 129 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

Brenden asked on 03 Jun 2009, 08:12 PM

I have created a simple grid to show the problem I have encountered.

The grid contains 3 columns:

Title: The title of the picture
Edit: An 'Edit' link, when you click on this link a tooltip appears with a link (the link includes the unique id of the element).
Delete: A 'Delete' link to delete the picture.

Problem: When the page first loads all of the tooltips are correct and they display the correct id. When you click the delete link and the page does an ajax postback, the grid is updated and the row is removed, however the tooltip is still referencing the old ID.

Hopefully this is a simple fix I am missing, but here is the code and table structure, thanks!

Table Layout:
Table Name: Pictures
Columns:

PictureID - int
Title - varchar
Approved - bit

test.aspx:

    
            <%@ Page language="VB" CodeFile="test.aspx.vb" AutoEventWireup="false" Inherits="_test" %>  
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>  
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
        
            <html xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">  
        
            <body>  
        
                <form runat="server" id="mainForm" method="post">  
        
                    <asp:ScriptManager id="ScriptManager1" runat="server" />  
        
                    <telerik:RadToolTipManager ID="RadToolTipManager1"  
        
                        Position="BottomRight" ShowDelay="0" 
        
                        runat="server" OnAjaxUpdate="OnAjaxUpdate" Sticky="true" ShowEvent="OnClick" 
        
                        RelativeTo="Element" EnableViewState="False"> 
        
                    </telerik:RadToolTipManager>                                                       
        
                        <telerik:RadAjaxPanel  
        
                            ID="RadAjaxPanel1"  
        
                            runat="server" 
        
                            LoadingPanelID="LoadingPanel1"> 
        
                                <asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server"> 
        
                                    <ContentTemplate> 
        
                                        <telerik:RadGrid 
        
                                            ID="RadGrid1" 
        
                                            runat="server" 
        
                                            Width="100%" 
        
                                            Skin="Vista" 
        
                                            OnItemDataBound="RadGrid1_ItemDataBound" 
        
                                            OnItemCommand="RadGrid1_ItemCommand" 
        
                                            DataSourceID="SqlDataSource1"> 
        
                                            <MasterTableView 
        
                                                AutoGenerateColumns="False" 
        
                                                DataKeyNames="PictureID" 
        
                                                Width="100%"> 
        
                                                <Columns> 
        
                                                    <telerik:GridTemplateColumn HeaderText="Title"> 
        
                                                        <ItemTemplate> 
        
                                                            <asp:HyperLink ID="targetControl" runat="server" NavigateUrl='<%# "picture/" & trim(Eval("PictureID")) & ".aspx" %>' Text='<%# Eval("Title") %>'></asp:HyperLink> 
        
                                                        </ItemTemplate> 
        
                                                    </telerik:GridTemplateColumn> 
        
                                                    <telerik:GridTemplateColumn 
        
                                                        UniqueName="Edit" HeaderText="Edit" ItemStyle-HorizontalAlign="Center"> 
        
                                                        <ItemTemplate> 
        
                                                            <asp:HyperLink runat="server" NavigateUrl="#" onclick="return false;" Text="edit" ID="hlEditPicture"></asp:HyperLink>                                                         
        
                                                        </ItemTemplate> 
        
                                                    </telerik:GridTemplateColumn> 
        
                                                    <telerik:GridTemplateColumn 
        
                                                        UniqueName="Delete" HeaderText="Delete" ItemStyle-HorizontalAlign="Center"> 
        
                                                        <ItemTemplate> 
        
                                                            <asp:LinkButton ID="DeletePicture" runat="server" OnClick="deletePicture" CommandArgument='<%# Eval("PictureID") %>'>Delete</asp:LinkButton> 
        
                                                        </ItemTemplate> 
        
                                                    </telerik:GridTemplateColumn> 
        
                                                </Columns> 
        
                                            </MasterTableView> 
        
                                        </telerik:RadGrid>                                     
        
                                        <asp:SqlDataSource ID="SqlDataSource1" runat="server" SelectCommand="SELECT * FROM Pictures Where approved = 1" ConnectionString="<%$ ConnectionStrings:TestString %>"></asp:SqlDataSource> 
        
                                    </ContentTemplate>                                                                 
        
                                </asp:UpdatePanel>                                                                 
        
                        </telerik:RadAjaxPanel> 
        
                        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Transparency="35" BackColor="#E0E0E0"> 
        
                            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'  
        
                                style="margin-top: 50px; margin-left: 0px; position:relative;" /> 
        
                        </telerik:RadAjaxLoadingPanel>         
        
                </form>  
        
            </body>  
        
            </html>

test.aspx.vb:

    
            Imports Telerik.Web.UI 
        
            Imports System.Data 
        
            Imports System.Data.SqlClient 
        
            Partial Class _test 
        
                Inherits System.Web.UI.Page 
        
                Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs) 
        
                    Me.UpdateToolTip(args.Value, args.UpdatePanel) 
        
                End Sub 
        
                Private Sub UpdateToolTip(ByVal elementID As String, ByVal panel As UpdatePanel) 
        
                    panel.ContentTemplateContainer.Controls.Add(New LiteralControl("<div style=""background:#FFF;font-size:13px;""><strong>Choose an option below:</strong><br /><a href=""edit.aspx?PictureID=" & elementID & """ class=""underline"">Edit Picture ID: " & elementID & "</a></div>")) 
        
                End Sub 
        
                Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs) 
        
                    If e.Item.ItemType = GridItemType.Item OrElse e.Item.ItemType = GridItemType.AlternatingItem Then 
        
                        Dim currentRow As DataRowView = DirectCast(e.Item.DataItem, DataRowView) 
        
                        Dim hpEditListing As Control = e.Item.FindControl("hlEditPicture") 
        
                        If Not [Object].Equals(hpEditListing, Nothing) Then 
        
                            If Not [Object].Equals(Me.RadToolTipManager1, Nothing) Then 
        
                                Me.RadToolTipManager1.TargetControls.Add(hpEditListing.ClientID, currentRow.Row("PictureID").ToString(), True) 
        
                            End If 
        
                        End If 
        
                    End If 
        
                End Sub 
        
                Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As GridCommandEventArgs) 
        
                    If e.CommandName = "Sort" OrElse e.CommandName = "Page" Then 
        
                        RadToolTipManager1.TargetControls.Clear() 
        
                        RadGrid1.Focus() 
        
                    End If 
        
                End Sub 
        
                Protected Sub deletePicture(ByVal sender As Object, ByVal e As System.EventArgs) 
        
                    Dim lnkBtn As LinkButton 
        
                    lnkBtn = sender 
        
                    Dim myConnection As New SqlConnection(ConfigurationManager.ConnectionStrings("testString").ConnectionString) 
        
                    Dim myCommand As New SqlCommand("UPDATE Pictures SET Approved = 0 WHERE PictureID = " & lnkBtn.CommandArgument, myConnection) 
        
                    myConnection.Open() 
        
                    myCommand.ExecuteNonQuery() 
        
                    If Not (myConnection Is Nothing) Then 
        
                        If (myConnection.State = ConnectionState.Open) Then 
        
                            myConnection.Close() 
        
                        End If 
        
                        myConnection.Dispose() 
        
                    End If 
        
                    If Not (myCommand Is Nothing) Then 
        
                        myCommand.Dispose() 
        
                    End If 
        
                    RadGrid1.Rebind() 
        
                End Sub 
        
            End Class

2 Answers, 1 is accepted

Accepted

answered on 04 Jun 2009, 12:33 PM

Hi Brenden,

I examined your code and I noticed that when you update the grid with AJAX you do not update the RadToolTipManager as well. That is why, it is storing the old information it used to have and this causes the problem. in order to get the desired result you should ensure that the manager is update along with the update of its target controls and in your case this means that you should move it in the update panel as well. You can find a sample demo which explains this below:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx

The demo uses a RadAjaxManager but the core scenario is the same and it concerns the ajax request, no matter what control initiated it. On a side note, I noticed that you are using both a RadAjaxPanel and a standard UpdatePanel nested in each other and as far as I see in your case this is not needed - you can simply remove the standard update panel and also put the RadToolTipManager in the RadAjaxPanel and everything should work fine.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Tooltip does not update on radgrid rebind

2 Answers, 1 is accepted