Ajax Loading panel on page Load

[Balamurali Venkatesan]

Hi,

Iam using a Rad Splitter with left pane,Splittrebar and Content pane.The Content pane takes sometime to load the pages.So we would like to put a ajax loading panel to show the page is just loading.

I checked in the following link
http://www.telerik.com/help/aspnet/ajax/ajxshowloadingpaneloninitialpageload.html

But the problem is the ajax laoding image doesn't show up until the page is loaded.Once after the page is laoded it shows the image and the page loads again

I have two requirement
1) The ajax laoding panel should be available for initial page load
2) The ajax loading panel should be visible for content pane when the user clicks the links on the left pane.

Thanks and Regards
V.Balamurali

[Balamurali Venkatesan]

HI,
Any help on this would be greatly appreciated.

Thanks and Regards,
V.Balamurali

[Tsvetie]

Hello V.Balamurali,
The article that you tried to use in order to show the RadAjaxLoadingPanel while the page loads is written for the RadAjaxLoadingPanel for ASP.NET. In order to review the article for RadAjaxLoadingPanel for ASP.NET AJAX, follow this link http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html.

I have attached the pages of a simple project, demonstrating how you can achieve the described behavior. In order to build it, I used the information from the following sources:

• http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html
• http://www.telerik.com/help/aspnet-ajax/ajxshowhideloadingpanel.html
• http://www.telerik.com/support/kb/aspnet-ajax/splitter/referencing-content-page-in-a-splitter-pane-from-the-parent-page-and-vice-versa.aspx

Sincerely yours,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Balamurali Venkatesan]

Hi,

Thanks a lot for the reply. We implemened the code functionality specified in your sample application.
The issue is , 
            on page load the loading panel image starts showing up and then the loading panel dispappers and after that the page load starts and takes some time to load the page.

The page load starts only after the loading panel is disappaered,also it seems the page load is invoked twice

This also happens in your sample application too.

Thanks and Regards
V.Balamurali
    

[Svetlina Anati]

Hi Balamurali,

I examined the demo Tsvetie provided but I was not able to observe the problems you report - the panel gets shown, after that an ajax request is performed to load the splitter and after the ajax request ends, respectively the splitter is loaded, the loading image gets hidden. I also debugged the page and the break point in the Page_Load event was hit only once as expected and not twice as you report. In order to confirm this I added some code which counts the number of loads in a Session object - please see the modified demo in order to see what I mean.

In case the problems persist on your end, please provide more details on what exactly you mean or how to modify the code, since the very same code attached does not replicate the issues you describe. 


Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Balamurali Venkatesan]

Hi,

Thanks for the update. Actually the loading panel shows up on the content pane when i click the link ono the left pane.After the content pane is loaded the laoding panel disappers, this is what expected.

Also in our radsplitter we have the content url to be defaulted to a particluar page so that when the radsplitter page is loaded the content pane will load and display that page.I see in ur sample its set to blank..

As per your sample, on initial page load the laoding panel shows up and after u set the visible property of the radsplitter to true on the ajax request it shows up the radsplitter and immediatley the loading panel disppaers.I need to have the loadiong panel appear untill the default content page is loaded.

Is there a way to achieve this

Thanks and Regards
V.Balamurali

[Balamurali Venkatesan]

Hi,

Iam using the code mentioned in the below link to display the Loading panel on page load.
I see you have used a Panel for the entire page and making it visisble through the ajax request.
The Ajax loading panel woeks fine and it shows up durong page load and once the page is copmpletely loaded it disappera.

The problem with this approach is I have lot of other controls like radgrid ,radcombo placed inside the panel. The radgrid's need datasource event should be firing to populate the grid on page load.But when i use this panel approach the controls inside the panel are  not updated and the radgrid need data source event is also not firing.

Do i need specifically have the radgrid a s updated control for the ajax manager inspite of specifying the panel1 as updated control for the rad ajax manager

Thanks and Regards
V.Balamurali

[Balamurali Venkatesan]

Sorry forgot to paste the link

http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html

[Balamurali Venkatesan]

Any help on this would be appreciated

[Svetlina Anati]

Hi Balamurali,

The only reason I can think of which might cause the described problem with the OnNeedDataSource event not firing is that you have set Visible="false" for teh splitter as in the demo previously provided. If this is the case, please remove the setting and also the line which restores the visibility in the code behind and set VisibleDuringInit="false" instead as shown below:

aspx:

   <asp:Panel ID="Panel1" runat="server">
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" VisibleDuringInit=false>
                <telerik:RadPane ID="RadPane1" runat="server" Width="200px">
                    <a href="ContentPage.aspx" onclick="ShowLoadingPanel();" target="RadPane2">Content page

code-behind:

 protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "InitialPageLoad")
        {
            //simulate longer page load
            System.Threading.Thread.Sleep(2000);
          //  RadSplitter1.Visible = true; - not needed anymore
        }
    }
    protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/App_Data/Nwind.mdb"));
        OleDbDataAdapter adapter = new OleDbDataAdapter();
        adapter.SelectCommand = new OleDbCommand("SELECT * FROM Customers", conn);
        DataTable myDataTable = new DataTable();

.................................................................

Let us know whether this helps.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Balamurali Venkatesan]

Hi ,

Thanks for the update.Actually in the demo provided earlier we are not setting the visible property of the Splitter.The entrie page contebts are inside a Asp:Panle and the panle's visibility is set to false/true.
As u suggested we can set the "VisisbleDuringInit" to false.But what if we don't have a splitter on a page.
The asp:panel doesn't have a VisibleDuringInit proeprty.Also we need to make sure all the controls inside that asp panel with ajax settings should not be affected.

By Setting the vsisble property to false for the asp panel we wre encountering lot of issues like the Radwindow is not getting opened.
The ajax setting dfor all other controls are not getting updated

Thanks and Regards
V.Balamurali

[Svetlina Anati]

Hello Balamurali,

I am not comletely sure of the problems you report but when you set some control's Visible property to false, nothing inside them is actually rendered and the client object of the RadWindow is not created. This is general ASP.NET knowledge and that is how things work and it is not directly related to RadControls. You can simply confirm that by viewing the source code of the page with the Visible property set to true and to false. This being said, you should decide how to modify your code in order to get the behavior which is with a higer priority and I recommend to use the already suggested approach with the visible splitter - in my opinion this is an acceptable solution.


Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[pramodh]

Hi Svetlina,

I have an exact situation as Balamurali has, I tried implementing the solution u provided him but as Mr.Balamurali say, page is loading twice.

That's because, consider if I have Page_Load function in .cs file as well which is has some code taking long time for ex

 protected void Page_Load(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
    }

and in design page inside radcodeblock i ll have

 function pageLoad(sender, eventArgs)   
            {   
               if(!eventArgs.get_isPartialLoad())   
               {
                   $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");   
               }   
            }

I do not want to have  OnAjaxRequest="RadAjaxManager1_AjaxRequest" on ajaxmanager.. rest of the things remain same..

how will I achieve this?

request you to help ASAP..

thanks
Pramod

[Dobromir]

Hi Pramod,

In upcoming version of RadSplitter for ASP.NET AJAX we will introduce built-in support for this functionality. The beta version of Q1 2011 of RadControls for ASP.NET AJAX is already live and available for download. Please find more information on the subject in the following blog post:
Telerik AJAX Q1 2011 BETA Pack

Greetings,
Dobromir
the Telerik team