Hi,
I have tried setting the Position="TopLeft" with no luck.I enabled the Viewstate as well, but no difference.I have a fixed size of tooltip and it does not have to stretch dynamically.I removed the offset as well.
Also I don't set the TargetControl collection and I am using the client-side API to show the tooltip as Telerik suggested this as I was looking for maximum efficiency and minimum footprint as specified in the below link.
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/RadToolTipManagerClientAPI/DefaultCS.
Please refer to the attached code. Here are some of the main issues:
-The call out does not point to the correct grid cell on boundary detection.
-Normally, with out boundary detection, randomly it displays the tooltip itself somewhere else (far away). If you click again the same cell then it displays in a correct position. The behavior is inconsistent.
I expect to display TopLeft position, call out pointing to the correct cell. Only when the bottom boundary is detected it should display BottomLeft position instead of TopLeft. When right boundary is detected it should still display topleft with call out adjusted to point to the correct cell. Please help me to fix this. I appreciate it!
I put together some sample with this. It almost mimics the behavior that I am getting in my applicaiton. I have tooltip displayed for the last n number of columns of the grid in my actual application.
Default2.aspx
.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<head runat="server">
<title></title>
<style type="text/css">
.title
{
font-size: 12px;
display: block;
font-weight: bold;
color: #ff6fb9;
}
.info
{
color: black;
font-size: 11px;
}
.TooltipCell
{
background-color:#fe8!important;
cursor: pointer;
_cursor: hand;
}
</style>
<telerik:RadCodeBlock runat="server">
<script type="text/javascript">
var clickedCell;
var mouseOvercell;
var shouldHideCellColor = true;
function OnCellClick() {
clickedCell = mouseOvercell;
shouldHideCellColor = false;
var tooltipManager = $find("<%= vsRadToolTipManager.ClientID %>");
if (tooltipManager != null) {
tooltipManager.set_manualClose(true);
//Find the tooltip for this element if it has been created
var tooltip = tooltipManager.getToolTipByElement(clickedCell);
//Create a tooltip if no tooltip exists for such element
if (!tooltip) {
tooltip = tooltipManager.createToolTip(clickedCell);
}
tooltip.show();
}
}
function SetCellStyle(id) {
if (clickedCell == null) {
mouseOvercell = document.getElementById(id);
if (mouseOvercell != null) {
mouseOvercell.className = "TooltipCell";
}
}
}
function ResetCellStyle() {
if (mouseOvercell != null && shouldHideCellColor) {
mouseOvercell.className = "";
}
if (clickedCell != null && shouldHideCellColor) {
clickedCell.className = "";
}
}
function OnHide(sender, eventArgs) {
clickedCell = null;
shouldHideCellColor = true;
ResetCellStyle();
}
</script>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="ajaxPanel" EnableAJAX ="true" EnableOutsideScripts="false"
EnablePageHeadUpdate="false" runat="server" LoadingPanelID="ajaxLoadingImage" EnableViewState="false"
EnableHistory="false" EnableTheming="false">
<telerik:RadToolTipManager runat="server" ID="vsRadToolTipManager" VisibleOnPageLoad="false"
EnableViewState="true" AutoTooltipify="false"
ShowEvent="FromCode" EnableAjaxSkinRendering="true" Modal="true"
HideEvent="ManualClose" ShowCallout="true"
RelativeTo="Element" Position="TopLeft"
Width="180px" Height="255px"
Skin="Hay" OnClientHide="OnHide"
OnAjaxUpdate="OnAjaxUpdate"
>
</telerik:RadToolTipManager>
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" GridLines="Vertical" OnItemDataBound="RadGrid1_ItemDataBound">
</telerik:RadGrid>
</telerik:RadAjaxPanel>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb"
SelectCommand="SELECT ProductID,ProductName,SupplierID,CategoryID,QuantityPerUnit,UnitsOnOrder,UnitsInStock,UnitPrice FROM [Products]"></asp:AccessDataSource>
</div>
</form>
</body>
</html>
Default2.aspx.cs
.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
{
Control ctrl = Page.LoadControl("ProductDetails.ascx");
args.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);
ProductDetails details = (ProductDetails)ctrl;
details.ProductID = "1";
}
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
if ((e.Item.ItemType == GridItemType.Item) || (e.Item.ItemType == GridItemType.AlternatingItem))
{
// Show the tooltip
GridDataItem dataItem = e.Item as GridDataItem;
//AttachtTooltipEvents(dataItem["ProductID"]);
// AttachtTooltipEvents(dataItem["ProductName"]);
//AttachtTooltipEvents(dataItem["RecorderLevel"]);
AttachtTooltipEvents(dataItem["UnitsOnOrder"]);
AttachtTooltipEvents(dataItem["UnitsInStock"]);
AttachtTooltipEvents(dataItem["UnitPrice"]);
}
}
private void AttachtTooltipEvents(TableCell dataCell)
{
dataCell.Attributes.Add("onclick", "OnCellClick();");
dataCell.Attributes.Add("onmouseover", "SetCellStyle('" + dataCell.ClientID + "');");
dataCell.Attributes.Add("onmouseout", "ResetCellStyle();");
}
}
ProductDetails.ascx
.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProductDetails.ascx.cs" Inherits="ProductDetails" %>
<asp:FormView ID="ProductsView" DataSourceID="ProductDataSource" DataKeyNames="ProductID"
runat="server" OnDataBound="ProductsView_DataBound">
<ItemTemplate>
<span class="title">Product Name: </span>
<asp:Label CssClass="info" ID="ProductName" runat="server"><%# Eval("ProductName") %></asp:Label>
<br />
<span class='title'>Category:</span>
<asp:Label CssClass="info" ID="Category" runat="server">Seafood</asp:Label>
<br />
<span class='title'>Quantity Per Unit:</span>
<asp:Label CssClass="info" ID="Label1" runat="server"><%# Eval("QuantityPerUnit")%></asp:Label>
<br />
<span class='title'>Unit Price:</span>
<asp:Label CssClass="info" ID="Label2" runat="server"><%# Eval("UnitPrice")%></asp:Label>
<br />
<span class='title'>Units In Stock:</span>
<asp:Label CssClass="info" ID="Label3" runat="server"><%# Eval("UnitsInStock")%></asp:Label>
<br />
<span class='title'>Units On Order:</span>
<asp:Label CssClass="info" ID="Label4" runat="server"><%# Eval("UnitsOnOrder")%></asp:Label>
<span class='title'>Supplier's Company Name:</span>
<asp:Label CssClass="info" ID="Label6" runat="server"><%# Eval("CompanyName")%></asp:Label>
<span class='title'>Supplier's Contact Name:</span>
<asp:Label CssClass="info" ID="Label5" runat="server"><%# Eval("ContactName")%></asp:Label>
</ItemTemplate>
</asp:FormView>
<asp:AccessDataSource ID="ProductDataSource" runat="server" DataFile="~/App_Data/Nwind.mdb"
SelectCommand="SELECT * FROM [Products] INNER JOIN [Suppliers] ON Products.SupplierID=Suppliers.SupplierID WHERE ([ProductID] = ?)">
<SelectParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
</SelectParameters>
</asp:AccessDataSource>
ProductDetails.ascx
.