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:
test.aspx:
test.aspx.vb:
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 |