RadAjaxPanel BackColor wont disappear after the AJAX post back

[Sub]

Hi,

I am upgrading 2008 Q3 version of telerik control to 2011 Q3 version in my project in .NET 4.0. I have an issue with the RadAjaxxLoadingPanel in the latest version where it used to work fine with 2008 version.

I have a RadComboBox outside of the RadAjaxPanel which refreshes the grid based on the dropdown selection. When Items selection is changed in the dropdown it will make a Ajax postback to refresh the grid. while the grid is getting refreshed the AjaxLoading panel shows the back color of gray with some transparency set. The grid will not be accessible during the refresh. The gray color disappeared itself and grid became accessible again, once the Ajax is complete in the 2008 Q3 version. But, with 2011 Q3 version the gray color won’t disappear and the grid is inaccessible even after the post back is complete.

Here is the code: Please let me know what needs to be done to get the same behavior in the latest version? Thanks in Advance!!!

<telerik:RadAjaxPanel ID="ajaxPanel" EnableAJAX ="true" EnableOutsideScripts="false"

EnablePageHeadUpdate="false" runat="server" LoadingPanelID="ajaxLoadingImage" EnableViewState="false"

 EnableEmbeddedScripts ="false" EnableHistory="false" EnableTheming="false"

ClientEvents-OnRequestStart="RequestStart" ClientEvents-OnResponseEnd="RequestEnd" >

    <telerik:RadAjaxLoadingPanel ID="ajaxLoadingImage" EnableViewState="false" runat="server" BackColor="Gray" Transparency="90"

    </telerik:RadAjaxLoadingPanel>

   

   <div id="DataGrid">

        <telerik:RadGrid id="grid" runat="server" AutoGenerateColumns="false"

            GridLines="None" Skin="" EnableEmbeddedSkins="true" EnableViewState="false"

            EnableAJAXLoadingTemplate="true" LoadingTemplateTransparency="100"

            EnableAJAX="true"  AllowSorting="true" OnItemCreated="grid_ItemCreated"

            OnItemDataBound="grid_ItemDataBound"

            OnSortCommand="grid_SortCommand"

            AllowAutomaticDeletes="false" AllowAutomaticInserts="false"

            AllowAutomaticUpdates="true" AllowCustomPaging="false"

            AllowFilteringByColumn="false" AllowMultiRowEdit="false"

            AllowMultiRowSelection="false" AllowPaging="false">

           

            <ClientSettings EnablePostBackOnRowClick = "false"

             AllowColumnHide="false" AllowColumnsReorder="false" AllowDragToGroup="false" AllowExpandCollapse="false"

             AllowKeyboardNavigation="false" AllowGroupExpandCollapse="false" AllowRowHide="false"

             AllowRowsDragDrop="false">

                 <Selecting AllowRowSelect="false" EnableDragToSelectRows="false" />

                 <ClientEvents OnGridCreated="GridCreated"></ClientEvents>

           </ClientSettings>

            <MasterTableView AllowCustomSorting="true" DataKeyNames="status" AllowNaturalSort="false"

            CssClass="ltable" Width="100%"  AllowAutomaticDeletes="false" AllowAutomaticInserts="false"

            AllowAutomaticUpdates="false" AllowCustomPaging="false" AllowFilteringByColumn="false"

            AllowPaging="false">

              <Columns>      

...                                   

              </Columns>     

            </MasterTableView>

    </telerik:RadGrid> 

    </div>

</telerik:RadAjaxPanel>

[Andrey]

Hi,

I reviewed your code and made a sample project to test your case. On my side the loading panel is working as expected.

The project is attached to this forum post. Give it a try and check whether you could replicate it on your side.

Greetings,
Andrey
the Telerik team

[Sub]

Thanks for the reply. The issue is reproducable when you create a web application project (not a web site) with master and content page. I am attaching the code here for each file including the web.config file. If you create a new web applicaiton project in VS 2010 and copy the below code then you can see the issue. Please review them and provide us with any solution. Thanks in advance!

Top1.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Top1.master.cs" Inherits="RadAjaxLoadingPanelIssue.MasterPages.Top1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
     <telerik:RadScriptManager ID="RadScriptManager1" EnableScriptCombine="true" EnableScriptGlobalization="true" EnableScriptLocalization="true" runat="server">
        <Scripts>

        </Scripts >
      </telerik:RadScriptManager>
    <div>

             <asp:ContentPlaceHolder ID="cphPageHeadTitle" runat="server">
             </asp:ContentPlaceHolder>

            <asp:ContentPlaceHolder ID="cphPageBody" runat="server">
            </asp:ContentPlaceHolder>
          </div>
    </form>
</body>
</html>

WebForm1.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Top1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="RadAjaxLoadingPanelIssue.Test.WebForm1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script language="javascript" type="text/javascript">
    function RequestStart(sender, args) {
    }
    function RequestEnd(sender, args) {
    }
    function OnSelectionChanged(item) {
        var ajaxPanelId = "<%=ajaxPanel.ClientID%>";
        $find(ajaxPanelId).ajaxRequestWithTarget("<%=ajaxPanel.UniqueID%>", 'ItemSelectionChanged');
    }
        </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphPageHeadTitle" runat="server">
<telerik:RadComboBox ID="radComboBox1" Width="400px"
         Runat="server" ShowToggleImage="true" AllowCustomText="false"
         RadComboBoxImagePosition="Right" UseEmbeddedScripts="false"
         MarkFirstMatch="true" OnClientSelectedIndexChanged="OnSelectionChanged">
     </telerik:RadComboBox>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphPageBody" runat="server">
     <telerik:RadAjaxPanel ID="ajaxPanel" EnableAJAX="true" EnableOutsideScripts="false"
            EnablePageHeadUpdate="false" runat="server" LoadingPanelID="ajaxLoadingImage"
            EnableViewState="false" EnableEmbeddedScripts="false" EnableHistory="false" EnableTheming="false"
            ClientEvents-OnRequestStart="RequestStart" ClientEvents-OnResponseEnd="RequestEnd">
            <telerik:RadAjaxLoadingPanel ID="ajaxLoadingImage" EnableViewState="false" runat="server"
                BackColor="Blue" Transparency="90">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None"  EnableViewState="false"
            EnableAJAXLoadingTemplate="true" LoadingTemplateTransparency="100"
            EnableAJAX="true"  AllowSorting="true"
            AllowAutomaticDeletes="false" AllowAutomaticInserts="false"
            AllowAutomaticUpdates="true" AllowCustomPaging="false"
            AllowFilteringByColumn="false" AllowMultiRowEdit="false"
            AllowMultiRowSelection="false" AllowPaging="false">
            </telerik:RadGrid>
          </telerik:RadAjaxPanel>

</asp:Content>

WebForm1.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            System.Collections.ArrayList list = new ArrayList();

            list.Add("Item1");
            list.Add("Item2");
            list.Add("Item3");
            radComboBox1.DataSource = list;
            radComboBox1.DataBind();
        }
        RadGrid1Load();
    }

    void RadGrid1Load()
    {
        // RadGrid1.DataSource = GetDataTable("SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers");
        System.Threading.Thread.Sleep(200);
        System.Collections.ArrayList list = new ArrayList();

        list.Add("string1" + radComboBox1.SelectedItem.Text);
        list.Add("string2" + radComboBox1.SelectedItem.Text);
        list.Add("string3" + radComboBox1.SelectedItem.Text);
        RadGrid1.DataSource = list;
    }
    protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
    {
        base.RaisePostBackEvent(sourceControl, eventArgument);
        switch (eventArgument)
        {
            case "ItemSelectionChanged":
                RadGrid1Load();
                RadGrid1.Rebind();
                break;
        }
    }
}

web.config

 

 

 

 

<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
  <connectionStrings>
    <add name="ApplicationServices"
         connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true"
         providerName="System.Data.SqlClient" />
  </connectionStrings>

  <system.web>
    <compilation debug="true" targetFramework="4.0" />

    <authentication mode="Forms">
      <forms loginUrl="~/Account/Login.aspx" timeout="2880" />
    </authentication>

    <membership>
      <providers>
        <clear/>
        <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
             enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
             maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
             applicationName="/" />
      </providers>
    </membership>

    <profile>
      <providers>
        <clear/>
        <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
      </providers>
    </profile>

    <roleManager enabled="false">
      <providers>
        <clear/>
        <add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" />
        <add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
      </providers>
    </roleManager>
      <httpHandlers>
          <add path="Telerik.Web.UI.DialogHandler.aspx" verb="*" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI" validate="false"/>
          <add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI" validate="false"/>
      </httpHandlers>

  </system.web>
    <location path="Telerik.Web.UI.WebResource.axd">
        <system.web>
            <authorization>
                <allow users="*"/>
            </authorization>
        </system.web>
    </location>
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <handlers>
            <remove name="Telerik.Web.UI.WebResource"/>
            <remove name="Telerik.Web.UI.DialogHandler"/>
            <add name="Telerik.Web.UI.WebResource" verb="*" path="Telerik.Web.UI.WebResource.axd" preCondition="integratedMode" type="Telerik.Web.UI.WebResource, Telerik.Web.UI"/>
            <add name="Telerik.Web.UI.DialogHandler" path="Telerik.Web.UI.DialogHandler.aspx" verb="*" preCondition="integratedMode" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI"/>
        </handlers>
    </system.webServer>
</configuration>

 

[Andrey]

Hi,

The problem you are facing is caused by that you have defined the RadAjaxLoadingPanel control in the RadAjaxPanel control. Thus when Ajax request is made the LoadingPanel is once more shown. You could resolve this issue by placing the RadAjaxLoadingPanel declaration outside of the AjaxPanel declaration.

Additionally, I saw that you have enabled the Sorting function of RadGrid but you are using simple DataBind(calling DataBind()). As this help topic says in order to get the correct results of the Sorting function you should use advanced databinding(with NeedDataSource or Declarative datasource).

I have created a sample project based on your case with the aforementioned modifications. Give it a try and check whether all is working as expected.

Kind regards,
Andrey
the Telerik team

[Sub]

Thanks for the solution. Moving the Loading panel outside of the Ajax panel fixed the issue. Thanks again.!!

BTW, The reason why I am not able to use the NeedDataSource was that, I am using the custom sorting, NeedDataSource was fired twice on postback when RadGrid viewstate is disabled. Telerik confirmed that this is the expected behavior. As there is no viewstate, the control cannot be recreated on postback, so it needs to fetch the data.