I've been using this article as a guide to implement mouseover "details" tooltips in my RadGrid. The result has been great - in general it works beautifully. There are, however, a couple issues that I could use some help with:
Here is the code I'm using:
Obviously I removed a lot of extraneous code to focus on just the bits that pertain to this question...
Thanks for the help!
Eddie
- If the user sorts the RadGrid, it should clear the TargetControls property of the RadToolTipManager and re-populate that with the new values for each target control. That doesn't happen. I'v implemented the code mentioned in the article in my ItemCommand and ItemDataBound but after a sort the value for each TargetControl is still the old one.
- I've tried changing the Skin value of the RadTooltipManager, but it doesn't seem to make any difference. Any idea what I might be missing?
- I'd like to move the "Close" button to the left side of the tooltip, is there a way to control it's position, or anything else about the close button?
Here is the code I'm using:
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e) |
{ |
if (e.CommandName == "Sort" || e.CommandName == "Page") |
RadToolTipManager1.TargetControls.Clear(); |
} |
protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args) |
{ |
UpdateToolTip(args.Value, args.UpdatePanel); |
} |
private void UpdateToolTip(string elementID, UpdatePanel panel) |
{ |
var ctrl = Page.LoadControl("~/usercontrols/PersonSummary.ascx"); |
panel.ContentTemplateContainer.Controls.Add(ctrl); |
var details = (PersonSummary)ctrl; |
details.xref = elementID; |
} |
protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e) |
{ |
if (e.Item.ItemType != GridItemType.Item && e.Item.ItemType != GridItemType.AlternatingItem) return; |
var target = e.Item.FindControl("targetControl"); |
if (!Equals(target, null)) |
if (!Equals(RadToolTipManager1, null)) |
{ |
var currentRow = e.Item as GridDataItem; |
if (currentRow != null) |
RadToolTipManager1.TargetControls.Add(target.ClientID, currentRow["colXref"].Text, true); |
} |
} |
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> |
<AjaxSettings> |
<telerik:AjaxSetting AjaxControlID="RadGrid1" EventName="Sort"> |
<UpdatedControls> |
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="loadingPnl" /> |
<telerik:AjaxUpdatedControl ControlID="RadToolTipMgr" /> |
</UpdatedControls> |
</telerik:AjaxSetting> |
<telerik:AjaxSetting AjaxControlID="imgBtnExportExcel" EventName="Click"> |
</telerik:AjaxSetting> |
</AjaxSettings> |
</telerik:RadAjaxManagerProxy> |
<telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="0" ShowCallout="true" |
OffsetX="-30" HideEvent="LeaveToolTip" ShowEvent="OnMouseOver" |
Width="560" Height="150" runat="server" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element" |
Position="MiddleRight" ManualClose="true" Modal="false" Sticky="true" Animation="None" |
ContentScrolling="Auto" Skin="WebBlue" EnableTheming="true"> |
</telerik:RadToolTipManager> |
<telerik:RadGrid ID="RadGrid1" EnableViewState="true" runat="server" AllowSorting="True" |
OnItemCommand="RadGrid1_ItemCommand" |
OnItemDataBound="RadGrid_ItemDataBound" |
OnNeedDataSource="RadGrid1_NeedDataSource" |
OnDataBound="rgResults_DataBound"> |
<MasterTableView DataKeyNames="Xref" ClientDataKeyNames="Xref" ShowHeadersWhenNoRecords="false" |
AllowMultiColumnSorting="true" VirtualItemCount="100"> |
<telerik:GridTemplateColumn HeaderText="NAME" SortExpression="LastName" |
UniqueName="colName" HeaderStyle-CssClass="gvHeaderName" ItemStyle-CssClass="gvItemName"> |
<ItemTemplate> |
<asp:HyperLink ID="targetControl" runat="server" |
NavigateUrl="#" |
Text='<%# Eval("LastName") + ", " + Eval("FirstName") + " " + Eval("MiddleName") %>'></asp:HyperLink> |
</ItemTemplate> |
</telerik:GridTemplateColumn> |
</MasterTableView> |
</telerik:RadGrid> |
Thanks for the help!
Eddie