LoadingPanel Followed by Blank Page

[Brian]

Hello,

I have an ASP.NET page that contains a standard asp:Label at the top of the page in order to display a page title. Below the page title, there are 2 RadGrid controls. The first grid displays parent records that are stored in a database. When an item is selected in the first grid, the second grid is then populated with child records (stored in the same database). This all works fine.

Because there is a 2 - 3 second wait after selecting an item in the first grid and the time it takes to populate the second grid, I have added a RadAjaxLoadingPanel to my ASP.NET page. This is the first time that I have used a LoadingPanel, so I have followed a Telerik demo as a guide for configuring the LoadingPanel.

When I now open my ASP.NET page and click on an item in the first grid, the LoadingPanel appears for about 3 seconds, and then everything on the page disappears, except for the title at the top of the page. Both grids are gone; neither of them are visible on the page. What would cause this to happen? I have double and triple-checked the settings of my LoadingPanel, comparing them to the settings shown in the Telerik demo (http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx). I have also googled this issue for help, but I cannot determine what I am missing.

Has anyone seen a problem like this and how do I resolve the problem?

Thank you,
Steven

[Maria Ilieva]

Hi Steven,

Could you please elaborate a bit more on the ajax settings you are applying in your application. Are you using RadAjaxManager or RadAjaxPanel to ajaxify the both Grids. Pasting the page markup and the related code behind will give us more information and we will be able to easily provide proper solution.

Regards,
Maria Ilieva
the Telerik team

[Brian]

I apologize for such a long period before I was able to reply. Other priorities come along, as you probably experience yourself from time-to-time.

Since you have requested more detail, I am providing all that I have (below). The .NET page that I am providing and its corresponding code are based on the Northwind.mdf database. As you know, this database is already included after installing the Telerik AJAX software. Should you should have a copy of the Northwind.mdf somewhere within your environment.

After you copy my ASPX and code (below) into your own project, simply change each connection string to your own SQL Server that hosts the Northwind.mdf database. After setting the name of your server and credentials, the page and code that I have provided should work. It will demostrate how the page goes blank after the loading panel finishes its execution.

I am sure that there is something wrong with the way I have configured the RadAjaxLoadingPanel, but I can't see my own mistake. So hopefully you will spot what I have done wrong and be able to point me in the right direction. Thank you.

Here is the .NET page:

<%@ Page Language="C#" MasterPageFile="~/design/MasterPage.master" ValidateRequest="false" AutoEventWireup="true" CodeFile="Northwind.aspx.cs" Inherits="Northwind" Title="Products" %>
<%@ Import Namespace="Artisteer" %>
<%@ Register TagPrefix="artisteer" Namespace="Artisteer" %>
<%@ Register TagPrefix="art" TagName="DefaultMenu" Src="DefaultMenu.ascx" %>
<%@ Register TagPrefix="art" TagName="DefaultHeader" Src="DefaultHeader.ascx" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="PageTitle" ContentPlaceHolderID="TitleContentPlaceHolder" runat="Server">
    Available Products
</asp:Content>
<asp:Content ID="MenuContent" ContentPlaceHolderID="MenuContentPlaceHolder" runat="Server"></asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderContentPlaceHolder" runat="Server">
    <art:DefaultHeader ID="DefaultHeader" runat="server" />
</asp:Content>
<asp:Content ID="SheetContent" ContentPlaceHolderID="SheetContentPlaceHolder" runat="Server">
    <br />
    <br />
    <form id="frmNorthwind" runat="server">
    <telerik:RadScriptManager ID="radScriptMgr" runat="server"></telerik:RadScriptManager>

    <telerik:RadAjaxLoadingPanel ID="radLoadPnl" runat="server"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="radAjaxMgr" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ddlCategory">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radProdGrid" LoadingPanelID="radLoadPnl" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ddlSupplier">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radProdGrid" LoadingPanelID="radLoadPnl" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="radProdGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="radProdGrid" LoadingPanelID="radLoadPnl" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadMultiPage ID="RadMultiPage1" Width="950px" runat="server" SelectedIndex="0" CssClass="pageView">
        <telerik:RadPageView ID="radPgView" runat="server">
            <fieldset style="width: 940px">
                <legend>Search for Products</legend>
                <table id="parentTable" border="0" cellpadding="5" width="935px">
                    <tr>
                        <td style="vertical-align: top; width: 150px">
                            <table>
                                <tr>
                                    <td style="vertical-align: top">
                                        <p>Category</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align: top">
                                        <asp:DropDownList ID="ddlCategory" runat="server" AutoPostBack="true" Style="width: 150px;" OnSelectedIndexChanged="ddlCategory_SelectedIndexChanged"></asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align: top">
                                        <p>Supplier</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align: top">
                                        <asp:DropDownList ID="ddlSupplier" runat="server" AutoPostBack="true" Style="width: 150px;" OnSelectedIndexChanged="ddlSupplier_SelectedIndexChanged"></asp:DropDownList>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <div style="position:relative; width:100%;">
                                <center>
                                    <asp:Label ID="lblProdHead" runat="server" Font-Bold="true" Font-Size="Large" Text="Products"></asp:Label>
                                </center>
                                <telerik:RadGrid ID="radProdGrid" runat="server" HeaderStyle-HorizontalAlign="Center"
                                    AllowPaging="true" AllowSorting="True" CellSpacing="0" GridLines="None"
                                    BorderWidth="0" BackColor="Transparent"
                                    OnNeedDataSource="radProdGrid_NeedDataSource"
                                    OnDataBound="radProdGrid_DataBound"
                                    OnSelectedIndexChanged="radProdGrid_SelectedIndexChanged">
                                    <ClientSettings EnableRowHoverStyle="true">
                                        <Resizing AllowColumnResize="true" AllowResizeToFit="true" EnableRealTimeResize="true" />
                                        <Selecting AllowRowSelect="True" />
                                        <Scrolling AllowScroll="false" UseStaticHeaders="True" />
                                    </ClientSettings>
                                    <MasterTableView ClientDataKeyNames="Product" Font-Size="Medium" TableLayout="Fixed">
                                        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                                            <HeaderStyle Width="20px" />
                                        </RowIndicatorColumn>
                                        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                                            <HeaderStyle Width="20px" />
                                        </ExpandCollapseColumn>
                                        <EditFormSettings>
                                            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                            </EditColumn>
                                        </EditFormSettings>
                                    </MasterTableView>
                                    <FilterMenu EnableImageSprites="False"></FilterMenu>
                                    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
                                </telerik:RadGrid>
                                <br />
                            </div>
                        </td>
                    </tr>
                </table>
                <br />
                <hr />
                <br />
                <table id="tblProducts">
                    <tr>
                        <td style="vertical-align:top; width:100px; text-align:right;">
                            <asp:Label ID="lblProdName" runat="server" Text="Product Name:"></asp:Label>
                        </td>
                        <td style="vertical-align: top">
                            <asp:TextBox ID="txtProdName" runat="server" AutoPostBack="false" Width="300px"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    </form>
</asp:Content>

Here is the code associated with the above page:

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class Northwind : System.Web.UI.Page {
    protected void Page_Init(object sender, EventArgs e) {
        this.radProdGrid.ClientSettings.EnablePostBackOnRowClick = true;
        this.radProdGrid.ClientSettings.Selecting.AllowRowSelect = true;
    } //End protected void Page_Init()

    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) {
            fillDropList("SELECT CategoryName FROM Categories ORDER BY CategoryName ASC", this.ddlCategory);
            fillDropList("SELECT CompanyName FROM Suppliers ORDER BY CompanyName ASC", this.ddlSupplier);
        }
    } //End protected void Page_Load()

    private void fillDropList(string strSQL, DropDownList DDL) {
        //////////////////////////////////////////////////////////////////////////////////////////////////////
        /// <summary>Populate the specified dropdownlist with data from the specified SQL statement</summary>
        /// <param name="strSQL">SQL statement to populate the dropdownlist</param>
        /// <param name="DDL">The dropdownlist to be populated</param>
        /// <return>Nothing</return>
        //////////////////////////////////////////////////////////////////////////////////////////////////////
        SqlConnection sqlCon = new SqlConnection();
        SqlCommand sqlCmd = new SqlCommand();
        SqlDataReader sqlRdr = null;

        string strCon = "Server=TestServer\\SQLExpress;Initial Catalog=Northwind;UID=sa;Pwd=Abc123Xyz;";

        DDL.Items.Clear();

        sqlCon.ConnectionString = strCon;
        sqlCon.Open();
        sqlCmd.CommandText = strSQL;
        sqlCmd.Connection = sqlCon;
        sqlRdr = sqlCmd.ExecuteReader();
        sqlRdr.Read();

        DDL.Items.Add("");

        if (sqlRdr.HasRows) {
            do {
                DDL.Items.Add(sqlRdr.GetSqlValue(0).ToString());
            } while (sqlRdr.Read());
        }

        sqlRdr.Close();
        sqlCon.Close();

        sqlRdr.Dispose();
        sqlCmd.Dispose();
        sqlCon.Dispose();
    } //End private void fillDropList()

    public DataTable getDataSource(string strQry) {
        //////////////////////////////////////////////////////////////////////////
        /// <summary>Assign a new or updated data source to the RadGrid</summary>
        /// <param name="strQry">SQL statement (data source)</param>
        /// <return>DataTable</return>
        //////////////////////////////////////////////////////////////////////////
        DataTable dataTbl = new DataTable();

        string strCon = "Server=TestServer\\SQLExpress;Initial Catalog=Northwind;UID=sa;Pwd=Abc123Xyz;";

        SqlConnection sqlCon = new SqlConnection(strCon);
        SqlDataAdapter sqlAdp = new SqlDataAdapter();

        sqlAdp.SelectCommand = new SqlCommand(strQry, sqlCon);
        sqlCon.Open();
        sqlAdp.Fill(dataTbl);

        sqlCon.Close();

        dataTbl.Dispose();
        sqlAdp.Dispose();
        sqlCon.Dispose();

        return dataTbl;
    } //End public DataTable getDataSource()

    protected void radProdGrid_DataBound(object sender, EventArgs e) {
        this.radProdGrid.MasterTableView.GetColumn("Product").HeaderStyle.Width = Unit.Percentage(100);
        this.radProdGrid.MasterTableView.GetColumn("Category").HeaderStyle.Width = Unit.Pixel(100);
        this.radProdGrid.MasterTableView.GetColumn("Supplier").HeaderStyle.Width = Unit.Pixel(150);
        this.radProdGrid.MasterTableView.GetColumn("Quantity").HeaderStyle.Width = Unit.Pixel(150);
        this.radProdGrid.MasterTableView.GetColumn("Price").HeaderStyle.Width = Unit.Pixel(50);
        this.radProdGrid.MasterTableView.GetColumn("UnitsInStock").HeaderStyle.Width = Unit.Pixel(50);
    } //End protected void radTasksGrid_DataBound()

    private string getCriteria() {
        ///////////////////////////////////////////////////////////////////////////////////////////
        /// <summary>Dynamically build a WHERE condition based on controls having values</summary>
        /// <return>String</return>
        ///////////////////////////////////////////////////////////////////////////////////////////
        string strWhere = "";

        if (!this.ddlCategory.Equals(null) && this.ddlCategory.Text != "") {
            strWhere = "WHERE Categories.CategoryName = '" + this.ddlCategory.Text + "'";
        }

        if (!this.ddlSupplier.Equals(null) && this.ddlSupplier.Text != "") {
            if (strWhere == "") {
                strWhere = "WHERE Suppliers.CompanyName LIKE '" + this.ddlSupplier.Text + "'";
            }
            else {
                strWhere += " AND Suppliers.CompanyName LIKE '" + this.ddlSupplier.Text + "'";
            }
        }

        return strWhere;
    } //End private string getCriteria()

    protected void ddlSupplier_SelectedIndexChanged(object sender, EventArgs e) {
        //Call method to populate product grid with matching suppliers (returns Nothing).
        filterProducts();
    } //End protected void ddlSupplier_SelectedIndexChanged()

    protected void ddlCategory_SelectedIndexChanged(object sender, EventArgs e) {
        //Call method to populate product grid with matching category (returns Nothing).
        filterProducts();
    } //End protected void ddlCategory_SelectedIndexChanged()

    private void filterProducts() {
        ////////////////////////////////////////////////////////////////
        /// <summary>Populate the grid with matching criteria</summary>
        /// <return>Nothing</return>
        ////////////////////////////////////////////////////////////////
        SqlConnection sqlCon = new SqlConnection();
        SqlCommand sqlCmd = new SqlCommand();
        SqlDataReader sqlRdr = null;

        //Call method to dynamically build a WHERE condition based on controls that have a value (returns String).
        string strCriteria = getCriteria();
        string strCon = "Server=TestServer\\SQLExpress;Initial Catalog=Northwind;UID=sa;Pwd=Abc123Xyz;";
        string strSQL = "SELECT Products.ProductName AS Product, Categories.CategoryName AS Category, Suppliers.CompanyName AS Supplier, Products.QuantityPerUnit AS Quantity, Products.UnitPrice AS Price, Products.UnitsInStock" +
                        " FROM Products" +
                        " INNER JOIN Categories ON Categories.CategoryID = Products.CategoryID" +
                        " INNER JOIN Suppliers ON Suppliers.SupplierID = Products.SupplierID " +
                          strCriteria +
                        " ORDER BY Products.ProductName ASC";

        sqlCon.ConnectionString = strCon;
        sqlCon.Open();
        sqlCmd.CommandText = strSQL;
        sqlCmd.Connection = sqlCon;
        sqlRdr = sqlCmd.ExecuteReader();

        this.radProdGrid.DataSource = sqlRdr;
        this.radProdGrid.MasterTableView.DataKeyNames = new string[] { "Product" };
        this.radProdGrid.CurrentPageIndex = 0;
        this.radProdGrid.Rebind();

        sqlCon.Close();
        sqlRdr.Dispose();
        sqlCmd.Dispose();
        sqlCon.Dispose();
    }

    protected void radProdGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) {
        string strWhere = "";

        if (e.RebindReason.ToString() == "InitialLoad") {
            strWhere = "";
        }
        else {
            strWhere = getCriteria();
        }

        string strSQL = "SELECT Products.ProductName AS Product, Categories.CategoryName AS Category, Suppliers.CompanyName AS Supplier, Products.QuantityPerUnit AS Quantity, Products.UnitPrice AS Price, Products.UnitsInStock" +
                        " FROM Products" +
                        " INNER JOIN Categories ON Categories.CategoryID = Products.CategoryID" +
                        " INNER JOIN Suppliers ON Suppliers.SupplierID = Products.SupplierID" +
                          strWhere +
                        " ORDER BY Products.ProductName ASC";

        this.radProdGrid.DataSource = getDataSource(strSQL);
        this.radProdGrid.MasterTableView.DataKeyNames = new string[] { "Product" };
    } //End protected void radProdGrid_NeedDataSource()

    protected void radProdGrid_SelectedIndexChanged(object sender, EventArgs e) {
        this.txtProdName.Text = this.radProdGrid.SelectedValue.ToString();
    } //End protected void radProdGrid_SelectedIndexChanged()
} //End public partial class Northwind

Thank you for your assistance,
Steven

[Maria Ilieva]

Hi Steven,

The issue you are facing is mostly related with incorrect Ajax settings than with the RadAjaxLoadingPanel appearance. Please do verify what the application behaviour is if the LoadingPanel declaration is removed from the page. Also please note that single PageView or nested in PageView control could not be added as AJAX initiator or updated control in the AJAX settings. The only possible approach is to add the whole MultiPage in the RadAjaxManager settings or wrap the whole control into RadAjaxPanel.
When we set the MultiPage as an updated control, you should also include the TabStrip associated with it in the Ajax settings.Please modify your settings as follows and verify of this works for you:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

Greetings,
Maria Ilieva
the Telerik team

[Brian]

Once again, I apologize for the long period of time that has transpired since my last response to you. This loading panel issue has been a low priority for us, compared to all of the other development that we have been working on.

I guess I am still not getting this, as it still does not work. I followed the instructions in your last post, but the loading panel is still causing my page to go blank.

The changes that you are suggesting…; are you saying that you made these changes to the sample page (that I provided in my last post) and the sample page began to work properly with the loading panel??? If so, could you send the corrected sample back to me, b/c I still cannot get this to work, and maybe it is b/c I am mis-understanding the instructions that you included in your last post.

BTW, in the sample that I included in my last post, if you remove the loading panel controls and references from the webpage, you will see that the sample works just fine. You can select a Category or Supplier from either dropdown list, which triggers the SelectedIndexChanged events, and the RadGrid is refreshed to display only values that match what was selected in the dropdown lists; that all works fine. When the loading panel is included in the sample webpage, however, the loading panel spins up as expected, but when it is done spinning, the webpage still goes blank. Please confirm for yourself that the sample page works fine when the loading panel is removed, and also observe that the blank page only occurs when the panel is included.

I know I’m still doing something wrong, but I am not sure that I fully understand the instructions included in your last post.

Thank you,

Steven

[Maria Ilieva]

Hi Steven,

Except the previously provided steps please set a Skin property for the RadAjaxLoadingPanel and let me know if this works for you.

Regards,
Maria Ilieva
the Telerik team

[Brian]

OK. I assigned Skin="Forest" to the telerik:RadAjaxLoadingPanel, which now gives me a green-colored loading panel, instead of the default iced-blue color, but my page still goes blank after the green loading panel completes execution.

[Maria Ilieva]

Hello Steven,

As the problem still persists after the provided suggestions it will be best to open a regular support ticket and send us sample runnable application which demonstrates the described behaviour. This is the only option we could debug your code and do our best to isolate the problem.

Best wishes,
Maria Ilieva
the Telerik team