<radajaxpanel> |
<formview> |
<targetcontrol id="abc123" /> |
<radtooltip TargetControlID="abc123" ShowEvent="OnClick" |
HideEvent="ManualClose" RelativeTo="BrowserWindow" |
Position="Center" Animation="FlyIn" Modal="true"> |
<radgrid> |
</radgrid> |
</radtooltip> |
</formview> |
</radajaxpanel> |
When any kind of events in the radgrid (Paging, Filtering) the modal tooltip disappears. Any ideas?
20 Answers, 1 is accepted
I am afraid that the provided information is not enough to track down the problem. As far as I understood, after you provide some action, the tooltips does not show next time they are expected to show. If so, the issue is most probably related to updating the target control and I recommend to examine the following online demo:
http://demos.telerik.com/aspnet-ajax/ToolTip/Examples/TargetControlsAndAjax/DefaultCS.aspx
In case this does not help, please prepare a sample, fully runnable demo (including DB, if needed, e.g use Northwind), open a new support ticket and send it to us along with detailed reproduction steps. Once we are able to examine and analyze the particular setup locally, we will help you resolve the issue and you could apply the fix in the original project.
Regards,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I examine dth eprovided demo project but I deleted the link because it contained a developer version of the Telerik.Web.UI.dll and it was poblished in a forum thread which is public and available to everybody.
We would like to ask you either to opne a suppoort ticket when sending dlls or to attach demos which uses a trial version.
Straight to your question - the described behavior is teh expected one with this setup - what actually happens is that when you change the grid's page you perform a postback and that is why the next time the page loads the tooltip is not shown. In order to solve the issue I suggest to use AJAX indtead of postback - another advantage of this is that you will get rid of the unpleasant flickering effect which occurs when a full postback is performed.
The easiest way to ajaxify the grid is to wrap it in a RadAjaxPanel as shown below:
<telerik:RadToolTip ID="rttChooseFrom" runat="server" Animation="FlyIn" ContentScrolling="Auto" |
Height="600px" HideEvent="ManualClose" Modal="true" Position="Center" RelativeTo="BrowserWindow" |
ShowEvent="OnClick" TargetControlID="lbChooseFrom" Title="Choose from this list..." |
Width="800px"> |
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> |
<telerik:RadGrid ID="rgList" runat="server" AllowPaging="True" DataSourceID="ObjectDataSource1" |
GridLines="None"> |
<HeaderContextMenu EnableTheming="True"> |
<CollapseAnimation Duration="200" Type="OutQuint" /> |
</HeaderContextMenu> |
<MasterTableView AutoGenerateColumns="False" DataSourceID="ObjectDataSource1"> |
<RowIndicatorColumn> |
<HeaderStyle Width="20px" /> |
</RowIndicatorColumn> |
<ExpandCollapseColumn> |
<HeaderStyle Width="20px" /> |
</ExpandCollapseColumn> |
<Columns> |
<telerik:GridBoundColumn DataField="Id" HeaderText="Id" SortExpression="Id" UniqueName="Id"> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name" |
UniqueName="Name"> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn DataField="ItemNumber" HeaderText="ItemNumber" SortExpression="ItemNumber" |
UniqueName="ItemNumber"> |
</telerik:GridBoundColumn> |
</Columns> |
</MasterTableView> |
<FilterMenu EnableTheming="True"> |
<CollapseAnimation Duration="200" Type="OutQuint" /> |
</FilterMenu> |
</telerik:RadGrid> |
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Load" TypeName="DataObject"> |
</asp:ObjectDataSource> |
</telerik:RadAjaxPanel> |
</telerik:RadToolTip> |
Regards,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
In order to get the desired behavior you should update only the content and not the tooltip itself. When you update the tooltip, it gets destroyed on the postback/ajax request and after that it is created again with its initial settings and you should force it to show again. This being said, you should update only its content e.g by wrapping the content in a separate update panel. Please, note, that if you have one update panel wrapping the whole tooltip and one which wraps only its content, you should set the outer update panel UpdateMode property to Conditional (it should be a standard asp update panel and not a RadAjaxpanel).
In case you need further assistance, please prepare a sample, fully runnable demo (including DB, if needed, e.g use Northwind), open a new support ticket and send it to us along with detailed reproduction steps as I already asked before.
Kind regards,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I cannot post the code for this page because it is proprietary, I just want to know if you have any ideas? If you cannot answer without seeing a code example, I understand, just let me know.
I cannot tell why you get this behavior until I am not able to debug your code. I assume that the first time you page the grid the outer update panel gets updated for some reason but I cannot tell what is it. I suggest to debug your code and try to find the reason for the problem and also to pay attention what and when is updating on the page.
In case you succeed to isolate the problem in a sample, runnable demo, open a new support ticket and send it to me along with detailed explanations and I will do my best to help.
Sincerely yours,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Would you please provide more detailed explanations of your setup? Provide also a detailed description of the exact actual behavior you get and the desired result. Once I have a better understanding on your particular case I will do my best to help.
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
I walked through your instructions in this thread, making sure that I had both the outer and inner updatepanels in place, and that the outer one was updatemode=conditional. A postback inside the inner updatepanel (the one inside the tooltip wrapping the grid) causes a postback in the outer one, making the tooltip disappear.
--Matt
Would you please provide more details about your exact configuration? Do you use a RadToolTipManagaer (which uses AJAX internally) or you use a separate RadToolTip (which does not have built-in AJAX) ? It will be good if you also provide some source code or link to a demo which is similar to your setup. Ones I get a better understanding on your exact setup I will do my best to help.
Regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
<telerik:RadToolTip HideEvent="FromCode" Animation="Fade" ID="toolEmailAda" RelativeTo="BrowserWindow" Position="Center" ShowEvent="OnClick" IsClientID="true" runat="server" Modal="true" RenderInPageRoot="true"> |
<div class="radToolTipDefaultContent"> |
<div class="forgotPasswordModal generalPopupModal"> |
<div class="closeModalContainer"> |
<a class="closeModal" href="javascript:closeToolTip();">close x</a> |
</div> |
<div class="wrapper"> |
<div class="modalContent"> |
<h2>Contact your<br />Associate Director of Admissions:</h2> |
<p> |
<strong><asp:Label ID="lblAdaName" runat="server" /></strong><br /> |
<asp:Label ID="lblAdaPhone" runat="server" /><br /> |
<asp:Label ID="lblAdaEmail" runat="server" /> |
</p> |
<div class="divider"></div> |
<telerik:RadAjaxPanel EnableAJAX="true" EnableViewState="true" runat="server" ID="radAjaxSendEmail" LoadingPanelID="radLPSendEmail"> |
<asp:Panel ID="pnlEmailForm" runat="server"> |
<table class="emailADATable" border="0" cellpadding="0" cellspacing="0"> |
<tr valign="middle"> |
<td width="100"> |
<strong>My Name:</strong> |
</td> |
<td width="200"> |
<asp:TextBox ID="txtMyName" Enabled="false" runat="server" MaxLength="100" /> |
</td> |
</tr> |
<tr> |
<td> |
<strong>Reply via:</strong> |
</td> |
<td> |
<asp:RadioButtonList CssClass="replyViaEmail" RepeatDirection="Horizontal" ID="rblReplyType" runat="server"> |
<asp:ListItem Selected="True"> Email</asp:ListItem> |
<asp:ListItem> Telephone</asp:ListItem> |
</asp:RadioButtonList> |
</td> |
</tr> |
<tr class="emailADAEmailAddress"> |
<td> |
<strong>Email Address:</strong> |
</td> |
<td width="200"> |
<asp:TextBox ID="txtMyEmailAddress" runat="server" MaxLength="100" /> |
<asp:RequiredFieldValidator ValidationGroup="emailAda" ID="rfvEmail" runat="server" ControlToValidate="txtMyEmailAddress" Display="dynamic" ErrorMessage="<br />Please enter your email address"></asp:RequiredFieldValidator> |
<asp:RegularExpressionValidator ValidationGroup="emailAda" ID="regEmail" runat="server" ControlToValidate="txtMyEmailAddress" Display="dynamic" ErrorMessage="<br />Please check email syntax" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator> |
</td> |
</tr> |
<tr class="emailADAPhoneNumber"> |
<td> |
<strong>Phone Number:</strong> |
</td> |
<td width="200"> |
<asp:TextBox ID="txtMyPhoneNumber" runat="server" MaxLength="20" /> |
<asp:RegularExpressionValidator ValidationGroup="emailAda" ID="regPhone" runat="server" ControlToValidate="txtMyPhoneNumber" Display="dynamic" ErrorMessage="<br />Please check your phone number syntax" ValidationExpression="^(1\s*[-\/\.]?)?(\((\d{3})\)|(\d{3}))\s*[-\/\.]?\s*(\d{3})\s*[-\/\.]?\s*(\d{4})\s*(([xX]|[eE][xX][tT])\.?\s*(\d+))*$"></asp:RegularExpressionValidator> |
</td> |
</tr> |
<tr> |
<td colspan="2"> |
<strong>Comment</strong> |
</td> |
</tr> |
<tr> |
<td colspan="2"> |
<div id="profanityWarningAda" class="profanitydetected"> |
<br /><table> |
<tr> |
<td><img src="/images/Common/iconwarning.gif" /></td> |
<td><h2>Profanity Detected!</h2><p>Items which contain profanity will not be approved for the gallery.</p></td> |
</tr> |
</table> |
</div> |
<asp:TextBox Rows="7" Columns="50" ID="txtMyComment" TextMode="MultiLine" runat="server" MaxLength="350" /> |
<asp:RequiredFieldValidator ValidationGroup="emailAda" ID="rfvComment" runat="server" ControlToValidate="txtMyComment" Display="dynamic" ErrorMessage="<br />Please provide a message"></asp:RequiredFieldValidator> |
</td> |
</tr> |
</table> |
<div class="modalBottomButtonSection"> |
<div class="divider"></div> |
<asp:Panel ID="pnlButtons" runat="server"> |
<asp:ImageButton ValidationGroup="emailAda" ID="btnSubmit" runat="server" CssClass="linkcursor" |
height="18" ImageUrl="/Images/Common/Buttons/btnSubmit.gif" |
onclick="btnSubmit_Click" ToolTip="Submit" width="60" /> |
|
<img onclick="closeToolTip();" id="btnCancel" class="linkcursor" height="18" src="/Images/Common/Buttons/btnCancel.gif" alt="Cancel" width="60" /> |
</asp:Panel> |
</div> |
<telerik:RadAjaxLoadingPanel ID="radLPSendEmail" runat="server"> |
<div class="ajaxindicator"> |
<img border="0" src="/Images/Indicators/red-circle.gif" />... sending message |
</div> |
</telerik:RadAjaxLoadingPanel> |
</asp:Panel> |
<asp:Panel ID="pnlResults" runat="server" Visible="false"> |
<h3 id="resultsholder"> |
<asp:Label ID="lblResults" runat="server"></asp:Label> |
</h3> |
<img id="btnClose" onclick="closeToolTip();" class="linkcursor" height="18" "" src="/Images/Common/Buttons/btnClose.gif" alt="Close" width="60" /> |
</asp:Panel> |
</telerik:RadAjaxPanel> |
</div> |
</div> |
</div> |
</div> |
</telerik:RadToolTip> |
If you show the tooltip by calling the client method show() this is done on the client and thus when you postback it is expected that the tooltip will hide because it has not been again shown on the client. What I can suggest to persist it open is to reopen it after the postback. To determine whether to do this you can use various manners depending on your scenario, e.g a hidden filed which holds a boolean flag, etc.
Kind regards,
Svetlina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
This is a rather old post but I am confronted with exactly the same problem.
When paging the RadGrid which resides in the RadTooltip, the tooltip dissappears or appears at the wrong position on the page.
Maybe you can you provide a working example?
Marc
Hi Marc,
What is the exact scenario?
Are you loading the grid inside the tooltip via the tooltip manager's AjaxUpdate event, or is it a standalone tooltip? If it is the former, you need to make sure the tooltip manager is not inside another updatePanel with UpdateMode=Always because that would dispose it when the grid posts the page from inside it. If it is the latter, does adding an update panel or RadAjaxPanel in it help?
If you are showing the tooltip with your own code, have you added a small timeout around the show() method as explained in this sticky thread:.http://www.telerik.com/forums/changing-targetcontrol-on-the-client?
I am adding a really simple example that works for me as a reference.
Regards,
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
When I would want to update some data on your DIV id="target" I place this into a wrapping UpdatePanel like this:
<
asp:UpdatePanel
ID
=
"UpdatePanel1"
runat
=
"server"
UpdateMode
=
"Conditional"
>
<
ContentTemplate
>
<
div
id
=
"target"
style
=
"width: 100px; height: 100px; background: yellow;"
>show tooltip</
div
>
<
telerik:RadToolTip
runat
=
"server"
ID
=
"RadToolTip1"
TargetControlID
=
"target"
IsClientID
=
"true"
Position
=
"BottomRight"
RelativeTo
=
"Element"
Width
=
"300px"
Height
=
"300px"
HideEvent
=
"LeaveTargetAndToolTip"
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"RadAjaxPanel1"
>
<
telerik:RadGrid
runat
=
"server"
ID
=
"RadGrid1"
AllowPaging
=
"true"
MasterTableView-PageSize
=
"5"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
>
</
telerik:RadGrid
>
</
telerik:RadAjaxPanel
>
</
telerik:RadToolTip
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
And that is were the RadTooltip is starting to dissapear on Postback.
Couls you help me with that?
Marc
Hi Marc,
Just put the tooltip outside of the update panel so it won't get disposed (and thus, closed).
<
asp:UpdatePanel
ID
=
"UpdatePanel1"
runat
=
"server"
UpdateMode
=
"Conditional"
>
<
ContentTemplate
>
<
div
id
=
"target"
style
=
"width: 100px; height: 100px; background: yellow;"
>show tooltip</
div
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
telerik:RadToolTip
runat
=
"server"
ID
=
"RadToolTip1"
TargetControlID
=
"target"
IsClientID
=
"true"
Position
=
"BottomRight"
RelativeTo
=
"Element"
Width
=
"300px"
Height
=
"300px"
HideEvent
=
"LeaveTargetAndToolTip"
>
<
telerik:RadAjaxPanel
runat
=
"server"
ID
=
"RadAjaxPanel1"
>
<
telerik:RadGrid
runat
=
"server"
ID
=
"RadGrid1"
AllowPaging
=
"true"
MasterTableView-PageSize
=
"5"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
>
</
telerik:RadGrid
>
</
telerik:RadAjaxPanel
>
</
telerik:RadToolTip
>
Regards, Marin Bratanov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.