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

[Rajesh]

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

[Marin Bratanov]

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

[Rajesh]

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>

[Marin Bratanov]

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