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
This is my user control where I want to tooltipify using RadToolTipManager
My Code behind to add the controls to tooltipify to the RadToolTipManager and the AjaxRequest
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);
}