I have a Page Which has a user control which in turn generates dynamic user controls and within one of the UC, i have a rad grid in which I would like to add a tooltip manager to handle thumbs up and thumbs down tooltip. The problem i am having is that when i mouse over the image, i does bring up a panel with the loading icon but then closes right away . I doesn't load the panel with the literal control ( a one liner) at all but I do see the title of the tooltip.
I've wasted to much time trying to get this working... even trying a client side but without success...
I'm not sure if the problem has anything to do with the dynamic nature of the user controls being generated... so on every Page_Init (of the parent user control), I load the detail control below dynamically. So everytime there is a postback, example due to the AjaxRequest of the TooltipManager, it regenerate the radgrid, and hence the tooltip controls...
I'm not sure how to handle this one... i'll probably try a declarative radtooltip on each row...because I'm running out of options and this is taking way to much time
protected void Page_Init(object sender, EventArgs e)
{
//Check SessionContext for selected MiniTab
if (!String.IsNullOrEmpty(SessionContext.GetContextValue<string>("miniTab")))
{
_currentMiniTab = SessionContext.GetContextValue<string>("miniTab");
}
else
{
_currentMiniTab = SetCurrentSessionContextOfMiniTab("SpecialOffers");
}
// Add Click Event on Mini Tabs
SetClickableMiniTabDivs();
SetJavascript();
if (IsPostBack)
{
// Get event arguments from post back.
string eventArg = Request["__EVENTARGUMENT"];
// Determine if postback is a custom postback from onClick of DIV Tabs
if (!string.IsNullOrEmpty(eventArg) && eventArg.StartsWith("@@@@"))
{
//Redirect to appropriate OnClick Event of the tab
CallDivEventHandler(eventArg);
}
}
//Load Detail Control after ViewState is Initialized
LoadDetailControl(_currentMiniTab);
}
private void LoadDetailControl(string miniTab)
{
phMiniTabContent.Controls.Clear();
UserControl ucTabContent = (UserControl)LoadControl(GetUserControlPath(miniTab));
ucTabContent.ID = "DynamicUserControl_MiniTab_" + miniTab;
phMiniTabContent.Controls.Add(ucTabContent);
SetCssClassForSelectedMiniTab(miniTab);
}
This is my user control where I want to tooltipify using RadToolTipManager
<telerik:RadToolTipManager ID="rttManager" runat="server" RelativeTo="Element" Width="225px"
Height="100px" Style="z-index: 31000" Position="BottomLeft" Title="Like or Dislike" HideDelay="10" HideEvent="ManualClose"
OnAjaxUpdate="rttManager_AjaxUpdate">
</telerik:RadToolTipManager>
<telerik:RadGrid ID="grdSpecialOffers" runat="server" AutoGenerateColumns="False"
CellSpacing="0" EnableViewState="False" GridLines="None" OnNeedDataSource="grdSpecialOffers_NeedDataSource"
OnItemCreated="grdSpecialOffers_ItemCreated" OnItemDataBound="grdSpecialOffers_ItemDataBound" ShowHeader="False" Skin="gmBlueGrid"
EnableEmbeddedSkins="false" Height="346px" Style="outline: none;">
<ClientSettings>
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
<MasterTableView EnableViewState="False" DataKeyNames="AccountId, OfferId">
<NoRecordsTemplate>
No Special Offers
</NoRecordsTemplate>
<Columns>
<telerik:GridTemplateColumn FilterControlAltText="Filter itemImage column" UniqueName="itemImage"
ItemStyle-Width="50px">
<ItemTemplate>
<a href="#">
<img id="imgPicture" runat="server" alt='<%# DataBinder.Eval(Container.DataItem, "DescLine1")%>'
src="" border="0" width="36" height="36" /></a>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn FilterControlAltText="Filter itemDescription column"
UniqueName="itemDescription" ItemStyle-Width="300px">
<ItemTemplate>
<asp:HyperLink ID="descriptionHyperlink" runat="server" CssClass="blackHyperlink"
NavigateUrl="#">
<asp:Label ID="lblDescriptionLine1" runat="server" CssClass="soDescLine1"> <%# DataBinder.Eval(Container.DataItem, "DescLine1")%></asp:Label></asp:HyperLink><br />
<asp:Label ID="lblDescriptionLine2" runat="server" CssClass="soDescLine2"> <%# DataBinder.Eval(Container.DataItem, "DescLine2")%></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn FilterControlAltText="Filter itemIcons column" UniqueName="itemIcons"
ItemStyle-Width="50px">
<ItemTemplate>
<div class="soAddButton">
<telerik:RadButton ID="btnAddItem" runat="server" Width="48" Height="23" NavigateUrl="#">
<Image ImageUrl="../Images/btAddCharcoal.gif" />
</telerik:RadButton>
</div>
<div class="soThumbsUpDown">
<telerik:RadButton ID="btnThumbsDown" runat="server" Width="13" Height="14" OnCommand="btnThumbsUpDown_Command"
CommandName="Down" CssClass="soThumbsDown">
<Image ImageUrl="../Images/icoThumbsDown.gif" />
</telerik:RadButton>
<telerik:RadButton ID="btnThumbsUp" runat="server" Width="13" Height="14" OnCommand="btnThumbsUpDown_Command"
CommandName="Up" CssClass="soThumbsUp">
<Image ImageUrl="../Images/icoThumbsUp.gif" />
</telerik:RadButton>
</div>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
My Code behind to add the controls to tooltipify to the RadToolTipManager and the AjaxRequest
protected void grdSpecialOffers_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
{
//Find Control to have tooltip
RadButton btnThumbsUp = (RadButton)e.Item.FindControl("btnThumbsUp");
if (btnThumbsUp != null)
{
if (rttManager != null)
{
rttManager.TargetControls.Add(btnThumbsUp.ClientID, "LIKE", true);
}
}
//Find Control to have tooltip
RadButton btnThumbsDown = (RadButton)e.Item.FindControl("btnThumbsDown");
if (btnThumbsDown != null)
{
if (rttManager != null)
{
rttManager.TargetControls.Add(btnThumbsDown.ClientID, "DISLIKE", true);
}
}
}
}
protected void grdSpecialOffers_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
HtmlImage imgPicture = (HtmlImage)e.Item.FindControl("imgPicture");
// For each item in the DataRowView, check if picture exist, else show default picture
DataRowView drv = (DataRowView)e.Item.DataItem;
if (drv != null)
{
string imageFile = drv["Picture"].ToString();
//Check of image file exist before rendering it on the rptDeals, otherwise replace it by the default.gif
if (!File.Exists(Server.MapPath("/" + SessionContext.AppServerName + "/Data_Images/" + imageFile)))
{
drv["Picture"] = "default.gif";
imgPicture.Src = "../Data_Images/Offers/default.gif";
}
}
RadButton btnThumbsUp = (RadButton)e.Item.FindControl("btnThumbsUp");
RadButton btnThumbsDown = (RadButton)e.Item.FindControl("btnThumbsDown");
//For each item in Special Offer, Add the OfferId as COmmand Argument.
btnThumbsUp.CommandArgument = e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["OfferId"].ToString();
btnThumbsDown.CommandArgument = e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["OfferId"].ToString();
if (drv["Rating"].ToString() == "3")
{
btnThumbsUp.Image.ImageUrl = "../Images/icoThumbsUpSelected.gif";
//btnThumbsUp.CssClass = "soThumbsSelected";
}
else if (drv["Rating"].ToString() == "1")
{
btnThumbsDown.Image.ImageUrl = "../Images/icoThumbsDownSelected.gif";
//btnThumbsDown.CssClass = "soThumbsSelected";
}
//Ajaxify the buttons so that they are refreshed by partial postbacks
soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsUp, btnThumbsUp);
soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsUp, btnThumbsDown);
soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsDown, btnThumbsUp);
soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsDown, btnThumbsDown);
////Find ThumbsUp Control to have tooltip - Used ItemDataBound Instead as a test
//if (btnThumbsUp != null)
//{
// if (rttManager != null)
// {
// rttManager.TargetControls.Add(btnThumbsUp.ClientID, "LIKE", true);
// }
//}
////Find ThumbsDown Control to have tooltip
//if (btnThumbsDown != null)
//{
// if (rttManager != null)
// {
// rttManager.TargetControls.Add(btnThumbsDown.ClientID, "DISLIKE", true);
// }
//}
}
}
protected void rttManager_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
{
LiteralControl litControl = new LiteralControl();
if (e.Value == "LIKE")
{
litControl.Text = "LIKE this offer <br/>(Show me more offer like this)";
}
else
{
litControl.Text = "DISLIKE this offer";
}
e.UpdatePanel.ContentTemplateContainer.Controls.Add(litControl);
}