RadGrid inside RadToolTip

21 posts, 0 answers
  1. Justin
    Justin avatar
    18 posts
    Member since:
    Oct 2008

    Posted 09 Jan 2009 Link to this post

    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?


  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 12 Jan 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Justin
    Justin avatar
    18 posts
    Member since:
    Oct 2008

    Posted 12 Jan 2009 Link to this post

    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.


  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 13 Jan 2009 Link to this post

    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.
  6. Justin
    Justin avatar
    18 posts
    Member since:
    Oct 2008

    Posted 13 Jan 2009 Link to this post

    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.
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 14 Jan 2009 Link to this post

    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.
  8. Justin
    Justin avatar
    18 posts
    Member since:
    Oct 2008

    Posted 14 Jan 2009 Link to this post

    Ok, I will try this, thanks for the help.
  9. Justin
    Justin avatar
    18 posts
    Member since:
    Oct 2008

    Posted 15 Jan 2009 Link to this post

    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.
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Jan 2009 Link to this post

    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.
  11. Matthew Timbs
    Matthew Timbs avatar
    17 posts
    Member since:
    Aug 2009

    Posted 04 Nov 2009 Link to this post

    I'm having this same issue. Has there been any resolution to it?
  12. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 05 Nov 2009 Link to this post

    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.
  13. Matthew Timbs
    Matthew Timbs avatar
    17 posts
    Member since:
    Aug 2009

    Posted 06 Nov 2009 Link to this post

    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
  14. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Nov 2009 Link to this post

    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.
  15. Pat O'Neil
    Pat O'Neil avatar
    7 posts
    Member since:
    Jul 2009

    Posted 26 Feb 2010 Link to this post

    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
  16. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Mar 2010 Link to this post

    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.
  17. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 27 Aug 2014 in reply to Svetlina Anati Link to this post

    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
  18. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Aug 2014 Link to this post

    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.

     
  19. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 01 Sep 2014 in reply to Marin Bratanov Link to this post

    Works OK, thanks Marin
  20. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 01 Sep 2014 in reply to Marin Bratanov Link to this post

    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
  21. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 01 Sep 2014 Link to this post

    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.

     
  22. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 01 Sep 2014 in reply to Marin Bratanov Link to this post

    Thanks Marin
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017