This is a migrated thread and some comments may be shown as answers.

RadGrid inside RadToolTip

20 Answers 484 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 09 Jan 2009, 02:55 PM
my page structure looks like this:

<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

Sort by
0
Svetlina Anati
Telerik team
answered on 12 Jan 2009, 01:30 PM
Hi Justin,

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.
0
Justin
Top achievements
Rank 1
answered on 12 Jan 2009, 02:00 PM
Here is my sample project.  I have a radgrid inside a radtool tip.  The radgrid has paging enabled.  When I navigate to another "page" in the radgrid, the tooltip disappears, therefore sinde the radgrid is inside the tooltip, I have click the linkbutton to see the tooltip again.


0
Svetlina Anati
Telerik team
answered on 13 Jan 2009, 12:06 PM
Hi Justin,

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.
0
Justin
Top achievements
Rank 1
answered on 13 Jan 2009, 06:10 PM
Is this also expected with column filters on the radgrid?  The only difference between my sample code and production code is I have a radajaxpanel wrapping the whole page instead of just the radgrid and the tooltip is still disappearing.
0
Svetlina Anati
Telerik team
answered on 14 Jan 2009, 03:17 PM
Hello Justin,

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.
0
Justin
Top achievements
Rank 1
answered on 14 Jan 2009, 04:11 PM
Ok, I will try this, thanks for the help.
0
Justin
Top achievements
Rank 1
answered on 15 Jan 2009, 01:48 PM
Ok, this worked for the most part.  I got it to work in my small sample, but in my actual code the behavior is unusual.  I have an ASP.Net UpdatePanel wrapping the whole page.  I have a tooltip inside a formview with a radgrid inside the tooltip.  When I first open the tooltip and click the "next page" button on the radgrid, the tooltip disappears.  But subsequently, when I open the tooltip again and "page" the radgrid, the tooltip stays open.

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.
0
Svetlina Anati
Telerik team
answered on 16 Jan 2009, 04:05 PM
Hi Justin,

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.
0
Matthew Timbs
Top achievements
Rank 1
answered on 04 Nov 2009, 06:00 PM
I'm having this same issue. Has there been any resolution to it?
0
Svetlina Anati
Telerik team
answered on 05 Nov 2009, 01:54 PM
Hello Matthew,

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.
0
Matthew Timbs
Top achievements
Rank 1
answered on 06 Nov 2009, 01:06 PM
I have a radgrid inside a radtooltip.  I explicitly show the tooltip (i.e. "fromcode") and when I do anything that causes a postback inside the grid (like sorting, etc) the tooltip disappears.  If I re-show the grid, the sorting change I made that caused the postback took effect. 

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
0
Svetlina Anati
Telerik team
answered on 09 Nov 2009, 04:02 PM
Hi Matthew,

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.
0
Pat O'Neil
Top achievements
Rank 1
answered on 26 Feb 2010, 09:13 PM
I have something similar going on.  I have a RadTooltip inside of a control that I am including on multiple pages.  On one page it works exactly how I want it to.  It is a simple email form with a thank you panel.  It sends the email and then shows the thank you panel and I use javascript to close the tooltip.  On the one page though it automatically closes after I post the form back.  Neither tooltip control is in an update panel on either page.  I would expect them to work exactly the same.

<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"
            <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">&nbsp;Email</asp:ListItem> 
                                                <asp:ListItem>&nbsp;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" /> 
                                        &nbsp;&nbsp; 
                                            <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> 

Any thoughts?

Pat
0
Svetlina Anati
Telerik team
answered on 01 Mar 2010, 03:54 PM
Hi Pat O'Neil,

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.
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 27 Aug 2014, 02:48 PM
Hi,

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
0
Marin Bratanov
Telerik team
answered on 29 Aug 2014, 10:20 AM

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,

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.

 
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 01 Sep 2014, 12:45 PM
Works OK, thanks Marin
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 01 Sep 2014, 01:08 PM
I was too fast here Marin.
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
0
Marin Bratanov
Telerik team
answered on 01 Sep 2014, 02:21 PM

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.

 
0
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
answered on 01 Sep 2014, 02:26 PM
Thanks Marin
Tags
ToolTip
Asked by
Justin
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Justin
Top achievements
Rank 1
Matthew Timbs
Top achievements
Rank 1
Pat O'Neil
Top achievements
Rank 1
Fit2Page
Top achievements
Rank 2
Iron
Iron
Iron
Marin Bratanov
Telerik team
Share this question
or