[Solved] Dynamically Loaded UserControls

[adam]

Background:
I have a user control that gets added to a content page for a master page dynamically.  That user control will then dynamically load another user control based on the currently selected tab.  The newly loaded tab content has a RadGrid that allows sorting.  The tab and the grid actions should be performed using AJAX.

The Problem:
With the user control below, I get a flicker in the browser everytime I click a tab or sort the grid (both of which are ajaxified).  How can I get rid of the flicker?

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadTabStripCourses">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="TabContentPlaceHolder"></telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="RadTabStripCourses"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="TabContentPlaceHolder">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="TabContentPlaceHolder"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<radTS:RadTabStrip ID="RadTabStripCourses" runat="server" ClickSelectedTab="false"
    AutoPostBack="true" Skin="Simple" Width="100%" SelectedIndex="1">
    <Tabs>
        <radTS:Tab Text="Pending" Value="Pending" runat="server">
        </radTS:Tab>
        <radTS:Tab Text="Completed" Value="Completed" runat="server">
        </radTS:Tab>
        <radTS:Tab Text="Expired" Value="Expired" runat="server">
        </radTS:Tab>
    </Tabs>
</radTS:RadTabStrip>
<asp:Panel ID="TabContentPlaceHolder" runat="server" EnableViewState="false">
</asp:Panel>

[Steve]

Hi Adam,

It is not immediately clear what is the exact problem from the info you've provided. We have the following suggestions:

• check whether you have ScriptManager and RadAjaxManager in the MasterPage. RadAjaxManagerProxy serves as assistant in passing the AjaxSettings to a main AjaxManager - thus it cannot work without it.
• you cannot use control that does not implement either INamingContainer, IPostBackDataHandler, or IPostBackEventHandler like asp:Panel, div etc ..as initiator in AjaxSettings. This is limitation we've inherited from MS AJAX. You should use the controls within the panel by locating them with FindControl() and adding them programmatically to the AjaxSettings as shown here.

Hope this helps.
All the best,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[adam]

Thank you for your response.  I have modified my code based on your response.

Let me explain the scenario one more time for clarification.

I have a user control that contains the RadTabStrip and an ASP panel where other user controls will be added depending on which tab is selected.  The user controls that are loaded into the panel contain a RadGrid that needs to be ajaxified as well (for sorting).

Now with that said, I understand that I can not use the panel as an initiator for the AJAX. 

So I have modified my RadAjaxManagerProxy as follows:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
</telerik:RadAjaxManagerProxy>

In the Page_Load event, I am dynamically loading the user control based on the currently selected tab and I am adding it to the panel.  At that time, I also need to setup the AjaxSettings for the AjaxManager.  I am doing that as follows.

Control radTabControl = this.FindControl(this.RadTabStripCourses.ID);
Control userControl = this.PanelTabContent.FindControl(loadedControl.ID);
Control radGridControl = userControl.FindControl(radGridControlId);
Control panel = this.FindControl(this.PanelTabContent.ID);

// Add the Tab as an Initiator and as the updated control.
this.RadAjaxManagerProxy1.AjaxSettings.AddAjaxSetting(radTabControl, radTabControl);

// Add the Tab as an Initiator and the Panel as the updated control.
this.RadAjaxManagerProxy1.AjaxSettings.AddAjaxSetting(radTabControl, panel);

// Add the Tab as an Initiator and the dynamically loaded UserControl as the updated control.
this.RadAjaxManagerProxy1.AjaxSettings.AddAjaxSetting(radTabControl, userControl);

// Add the Tab as an Initiator and the RadGrid as the updated control.
this.RadAjaxManagerProxy1.AjaxSettings.AddAjaxSetting(radTabControl, radGridControl);

// Add the RadGrid as an Initiator and as the updated control.
this.RadAjaxManagerProxy1.AjaxSettings.AddAjaxSetting(radGridControl, radGridControl);

With all of this in place, the grid no longer will flicker when it is sorted, and it appears to be operating correctly.  But when I click on a Tab, the page will still flicker like I am missing something that needs to be hooked up.

Can anyone offer some more insight?  Is it related to the fact that I am trying to use the RadTabStrip with the Prometheus AJAX controls?

[Steve]

Hi Adam,

Your code looks ok, excluding the code updating the user control. Note that user controls do not render any html on the page, so they cannot be used as initiator/updated controls. Moreover this line is redundant, because you have already located the RadGrid and have separate AjaxSettings for it. Also make sure that you set ID to the user controls you are loading dynamically.

All the best,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[adam]

Thanks, I thought that was redundant, so I have removed it.

I have tested this in IE7 and it appears fine... no flickering...

But when I test it in Firefox, I do get a flicker if I have the browser sized such that the page requires scrolling and I have scrolled down the page a little.

What can I do to fix this problem for Firefox?

[Steve]

Hi Adam,

Let us differentiate the "flickering" from the postback. Please add a check in Page_Load for RadAjaxManager1.IsAjaxRequest and verify if this is true or false. If it is true, then the flickering you are talking about is probably the browser scrolling to top after the ajax request? If it is false, this means that the control performs standard postbacks when it should perform ajax requests. But having this working for IE and not for Firefox is really strange.
Would you please elaborate?

All the best,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[adam]

I added the check in my page in the Page_Load handler.

bool b = RadAjaxManager.GetCurrent(Page).IsAjaxRequest;

It returns true when I click the tab or sort the grid, as it should.

So to me it is because the browser is scrolling back to the top and then back down again, but this only occurs in Firefox - not IE.  Is there anything I can do to stop this from occuring?

[Steve]

Hi Adam,

Although we could not reproduce this with the latest Firefox version and Q3 SP1 locally (as well as online example) you can try to avoid the flicker you observe by hooking to the OnRequestStart and OnResponseEnd events and setup your own scroll position:

<script type="text/javascript">
             function scrollTop()
            {
        window.document.body.scrollTop = 0;
                window.document.documentElement.scrollTop = 0;
            }
</script>

You do not have to provide direct value, you can get a DOM element clientHeight and use that in your logic as well.

Regards,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center