RadGrid inside Radtooltip - Postback caused by radgrid causes radtooltip to close

4 posts, 0 answers
  1. Rajesh
    Rajesh avatar
    6 posts
    Member since:
    Apr 2013

    Posted 05 Feb 2014 Link to this post

    Hi ,

    I have a RadGrid inside RadTooltip shown as below. The tooltip should be opened on click of a hyperlink. The Radgrid is loaded on Page load.

    The issue is when I try to sort or filter data inside the Radgrid, the postback is causing the Radtooltip to close. When I try to open the Radtooltip again on click of a hyperlink, the rows are shown sorted/filtered properly as expected.

    How can I make the tooltip stay opened in case of any postback caused by any control inside the RadTooltip ?

    Here is my code :

    001.<div id="Div1">
    002.    <div id="Div2" style="z-index: 1;" class="hidden">
    003.    <asp:UpdatePanel UpdateMode="Conditional" runat="server">
    004.    <ContentTemplate>
    005.        <telerik:RadToolTip ID="radtoolViewAnotherAcc" runat="server" ShowEvent="OnClick"
    006.        RenderInPageRoot="true" HideEvent="ManualClose" TargetControlID="hplViewAnotherAcc"
    007.        Position="TopLeft" Animation="Slide" RelativeTo="Element" EnableShadow="false"><telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    008.<div style="height: 20px;float:right;white-space:nowrap">
    009.    <asp:Button ID="btnClearFilter" runat="server" Text="CLEAR FILTER" OnClick="btnClearFilter_Click" />
    010.    <a class="tooltipclose" style="display: inline-block;" title="Close" href="javascript:void(0)" onclick="toggleviewaccounts()"></a>                            
    011.</div>                 
    012.<telerik:RadAjaxManager runat="server" ID="RadAjaxManager2" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    013.    <AjaxSettings>
    014.        <telerik:AjaxSetting AjaxControlID="rgrdViewAnotherAccount">
    015.            <UpdatedControls>
    016.                    <telerik:AjaxUpdatedControl ControlID="rgrdViewAnotherAccount"></telerik:AjaxUpdatedControl>
    017.            </UpdatedControls>
    018.        </telerik:AjaxSetting>
    019.            <telerik:AjaxSetting AjaxControlID="rgrdViewAnotherAccount">
    020.            <UpdatedControls>
    021.                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1"></telerik:AjaxUpdatedControl>
    022.            </UpdatedControls>
    023.        </telerik:AjaxSetting>
    024.            <telerik:AjaxSetting AjaxControlID="btnClearFilter">
    025.            <UpdatedControls>
    026.                    <telerik:AjaxUpdatedControl ControlID="rgrdViewAnotherAccount"></telerik:AjaxUpdatedControl>
    027.            </UpdatedControls>
    028.        </telerik:AjaxSetting>
    029.    </AjaxSettings>
    030.    </telerik:RadAjaxManager>
    031.    <telerik:RadAjaxLoadingPanel runat="server" Transparency="50" ID="RadAjaxLoadingPanel2">Loading</telerik:RadAjaxLoadingPanel>
    032.            
    033.<div>                                  
    034.<telerik:RadGrid runat="server" ID="rgrdDetails" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
    035.        AllowFilteringByColumn="true" Height="250px" OnItemCommand="rgrdViewAnotherAccount_ItemCommand"
    036.        ItemDataBound="rgrdViewAnotherAccount_ItemDataBound" OnNeedDataSource="rgrdViewAnotherAccount_NeedDataSource" CssClass="rgNoScrollImage">                  
    037.                                              
    038.<MasterTableView AllowFilteringByColumn="true"  CommandItemDisplay="Top">                                                 
    039.        <PagerStyle AlwaysVisible="true" />
    040.        <FilterItemStyle HorizontalAlign="Center" />
    041.        <CommandItemSettings ShowRefreshButton="false" ShowAddNewRecordButton="false"/>
    042.        <Columns>
    043.            <telerik:GridTemplateColumn  HeaderText="ACCOUNT #" DataField="Account"   AutoPostBackOnFilter="true" AllowFiltering="True" CurrentFilterFunction="Contains"
    044.                ShowFilterIcon="true">
    045.                <ItemTemplate>
    046.                    <asp:LinkButton ID="lnkbtnSelectAccount" CausesValidation="false" runat="server"
    047.                        CommandName="Select" CommandArgument='<%#Eval("Account")%>' Text='<%#Eval("Account")%>' >
    048.                        </asp:LinkButton>
    049.                </ItemTemplate>
    050.                    <HeaderStyle HorizontalAlign="Center" />   
    051.                    <ItemStyle HorizontalAlign="Center" />
    052.            </telerik:GridTemplateColumn>
    053.            <telerik:GridBoundColumn FilterControlWidth="105px" DataField="CompanyName" HeaderText="NAME"
    054.                UniqueName="CompanyName" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
    055.                ShowFilterIcon="true">
    056.                    <HeaderStyle HorizontalAlign="Center" />   
    057.                    <ItemStyle HorizontalAlign="Center" />
    058.            </telerik:GridBoundColumn>
    059.            <telerik:GridBoundColumn FilterControlWidth="105px" DataField="Address" HeaderText="ADDRESS"
    060.                UniqueName="Address" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
    061.                ShowFilterIcon="true">
    062.                <HeaderStyle HorizontalAlign="Center" Width="200px" />   
    063.                    <ItemStyle HorizontalAlign="Center" Width="200px"/>
    064.            </telerik:GridBoundColumn>
    065.            <telerik:GridTemplateColumn HeaderText="MY DEFAULT" AllowFiltering="false" ShowFilterIcon="false">
    066.            <ItemTemplate>
    067.                    <%#Eval("DefaultAccount")%>
    068.                <span class="<%#Eval("MakeDefault")%>">                                                               
    069.                    <asp:LinkButton ID="lnkbtnMakeDefaultAccount" CausesValidation="false" runat="server"
    070.                        CommandName="Default" CommandArgument='<%#Eval("Account")%>' OnCommand="lnkbtnMakeDefault_OnCommand" >Make Default</asp:LinkButton>
    071.                </span>
    072.            </ItemTemplate>
    073.            <HeaderStyle Width="100px" />
    074.            <ItemStyle Width="100px" />
    075.            </telerik:GridTemplateColumn>
    076.                <telerik:GridBoundColumn FilterControlWidth="105px" DataField="Status" HeaderText="STATUS"
    077.                UniqueName="Status" AllowFiltering="false">
    078.                <HeaderStyle HorizontalAlign="Center" Width="100px" />   
    079.                    <ItemStyle HorizontalAlign="Center" Width="100px" />
    080.            </telerik:GridBoundColumn>
    081.            </Columns>
    082.                                             
    083.        </MasterTableView>
    084.        <GroupingSettings  CaseSensitive="false"/>
    085. 
    086.            <ClientSettings>
    087.            <Scrolling AllowScroll="True" UseStaticHeaders="True"  SaveScrollPosition="false">
    088.            </Scrolling>
    089.            <Selecting AllowRowSelect="false" />
    090.        </ClientSettings>
    091.        </telerik:RadGrid>   
    092.        <br />
    093.        <br />            
    094.</div>
    095.            </telerik:RadAjaxPanel>
    096.</telerik:RadToolTip>
    097.    </ContentTemplate>
    098.    </asp:UpdatePanel>
    099.    </div>
    100.</div>

    Regards,
    Rajesh







  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 05 Feb 2014 Link to this post

    Hello Rajesh,

    Generally, you need to use AJAX. I see you have attempted to do so, but the current setup is prone to causing a lot of problems, because:
    - there are many nested update panels
    - many nested RadAJaxPanels
    - a radAjaxManager is inside an UpdatePanel
    - there are duplicated AJAX settings

    With such an incorrect AJAX scenario it is very likely that simply the tooltip is also disposed with the partial postback from the grid.

    What I would advise is to:
    1)  make sure the RadToolTIp itself is NOT in any update panels or RadAjaxPanels, or settings in a RadAjaxManager / RadAjaxManagerProxy
    2)  remove all current AJAX settings
    3) add only one RadAjaxPanel INSIDE the RadToolTip
    4) examine this article on properly cofiguring the tooltip - note how it is advised to set Width and Height: http://www.telerik.com/help/aspnet-ajax/tooltip-troubleshooting-common-issues.html.

    For example:
    <div id="Div1">
        <div id="Div2" style="z-index: 1;" class="hidden">
            <telerik:RadToolTip ID="radtoolViewAnotherAcc" runat="server" ShowEvent="OnClick"
                                RenderInPageRoot="true" HideEvent="ManualClose" TargetControlID="hplViewAnotherAcc"
                                Position="TopLeft" Animation="Slide" RelativeTo="Element" EnableShadow="false">
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                    . . . .
                    other content
                    <telerik:RadGrid runat="server" ID="rgrdDetails" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
                                     AllowFilteringByColumn="true" Height="250px" OnItemCommand="rgrdViewAnotherAccount_ItemCommand"
                                     ItemDataBound="rgrdViewAnotherAccount_ItemDataBound" OnNeedDataSource="rgrdViewAnotherAccount_NeedDataSource" CssClass="rgNoScrollImage">
                                     . . . .
                                     more grid settings here
                    </telerik:RadGrid>
                </telerik:RadAjaxPanel>
            </telerik:RadToolTip>
        </div>
    </div>
     


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rajesh
    Rajesh avatar
    6 posts
    Member since:
    Apr 2013

    Posted 05 Feb 2014 in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks for your reply. I've tried as per your suggestion but still it didn't work .

    If possible, could you please provide a working example which shows the tooltip stayed open on ajax postback.

    <div id="Div1" runat="server">
                              <asp:HyperLink ID="hplViewAnotherAcc" runat="server" >View another account</asp:HyperLink>
                            <div id="allaccountsmask" class="hidden" onclick="toggleviewaccounts()"></div>
                                        
                            <div id="allaccountsviewcontainer">
                                <div id="allaccountsview" style="z-index: 1;" class="hidden">
                                <telerik:RadAjaxManager runat="server" ID="RadAjaxManager2" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                                    <AjaxSettings>
                                 
                                        <telerik:ajaxsetting AjaxControlID="rgrdviewanotheraccount">
                                            <updatedcontrols>
                                                <telerik:ajaxupdatedcontrol controlid="RadAjaxPanel1"></telerik:ajaxupdatedcontrol>
                                            </updatedcontrols>
                                        </telerik:ajaxsetting>
                                  
                                    </AjaxSettings>
                                    </telerik:RadAjaxManager>
                                    <telerik:RadAjaxLoadingPanel runat="server" Transparency="50" ID="RadAjaxLoadingPanel2">Loading</telerik:RadAjaxLoadingPanel>
                        
     
                                    <telerik:RadToolTip ID="radtoolViewAnotherAcc" runat="server" ShowEvent="OnClick"
                                    RenderInPageRoot="true" HideEvent="ManualClose" TargetControlID="hplViewAnotherAcc"
                                    Position="TopLeft" Animation="Slide" RelativeTo="Element" EnableShadow="false">
                                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                                  
                                    <div style="height: 20px;float:right;white-space:nowrap">
                                        <asp:Button ID="btnClearFilter" runat="server" Text="CLEAR FILTER" OnClick="btnClearFilter_Click" />
                                        <a class="tooltipclose" style="display: inline-block;" title="Close" href="javascript:void(0)" onclick="toggleviewaccounts()"></a>
                                  
                                    </div>                           
                                   
                                    <br /><br />
                                    <p style="display:block">To <a class="tooltip" href="javascript:void(0)" title='<asp:Literal runat="server" Text="<%$ Resources: ToolTips, overview.viewanotheraccount.sort%>" />'>sort</a> the list, click the desired column heading.
                                    To <a class="tooltip" href="javascript:void(0)" title='<asp:Literal runat="server" Text="<%$ Resources: ToolTips, overview.viewanotheraccount.filter%>" />'>filter</a> the list, enter a value in the desired
                                    column and click the Filter icon</p>     
                                                                   
                                    <telerik:RadGrid runat="server" ID="rgrdViewAnotherAccount" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
                                    AllowFilteringByColumn="true" Height="250px" OnItemCommand="rgrdViewAnotherAccount_ItemCommand" ItemDataBound="rgrdViewAnotherAccount_ItemDataBound" OnNeedDataSource="rgrdViewAnotherAccount_NeedDataSource" CssClass="rgNoScrollImage">                  
                                                  
                                       ...
                                    </telerik:RadGrid>   
                                    <br />
                                    <br />            
                                           
                                    </telerik:RadAjaxPanel
                                    </telerik:RadToolTip>
                                </div>
                            </div>
                        </div>    
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 05 Feb 2014 Link to this post

    Hello Rajesh,

    I see that you did not follow my guidance at all.
    Please examine my response carefully to understand the problem and the steps to avoid it.
    The snippet I pasted should work if the other issues (more nested update panels) are not present anymore.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top