This is a migrated thread and some comments may be shown as answers.

Enabling AutoPostBackOnFilter causes loading panel to display non-modal

1 Answer 101 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Luke asked on 17 Aug 2011, 06:51 AM

Hello. I'm noticing that when I set the AutoPostBackOnFilter=true for a column that filtering on that column by pressing the enter key causes display of a non-modal loading panel. The two cases I have observed are:

Case 1 - Incorrect modal behavior when ShowFilterIcon="false" and AutoPostBackOnFilter="true"
Case 2 - Correct modal behavior when ShowFilterIcon="true" and AutoPostBackOnFilter="true"

I am using ASP.NET AJAX controls version 2011.1.519.40 and observed this behavior on the following browsers:

IE 9
Firefox 5.0
Chrome 13.0.782.112 m
Safari 5.0.5

Below is markup, code-behind and a sample data item class that demonstrates the problem. Thank you.

Markup

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ 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>When AutoPostBackOnFilter is on Loading Panel is not modal</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="scriptManager" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="loading">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="grid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="loading" runat="server" Skin="Windows7" Transparency="1">

</telerik:RadAjaxLoadingPanel>

<p>

The setting of ShowFilterIcon along with AutoPostBackOnFilter for grid columns causes inconsistent

behavior of the loading panel modality.

<ul>

<li>

Case 1 - Incorrect modal behavior when ShowFilterIcon="false" and AutoPostBackOnFilter="true"

</li>

<li>

Case 2 - Correct modal behavior when ShowFilterIcon="true" and AutoPostBackOnFilter="true"

</li>

</ul>

</p>

<p>

To have time to observe the behavior, long filter times are simulated by Thread.Sleep() - about 5 seconds - in

code behind.

<br />

<h4>Steps to reproduce the incorrect behavior:</h4>

<ol>

<li>

Enter filter text in the 'Case 1' column.

</li>

<li>

Press enter.

</li>

<li>

Using mouse, click anywhere on the grid. Note that the filter textbox will also recieve focus if clicked.

</li>

<li>

Observe the loading panel disappears, and after 5 or so seconds, the filter operation finishes successfully.

</li>

</ol>

<h4>Steps to observe the correct behavior:</h4>

<ol>

<li>

Enter filter text in the 'Case 2' column

</li>

<li>

Click the filter button.

</li>

<li>

Using mouse, click anywhere on the grid or the filter textbox.

</li>

<li>

Observe the loading panel is modal and does not disappear until completion of the filter process.

</li>

</ol>

</p>

<br />

<telerik:RadGrid ID="grid" runat="server" AllowFilteringByColumn="True" AutoGenerateColumns="False"

AllowPaging="True" Skin="Windows7" OnNeedDataSource="grid_NeedDataSource">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="Id" UniqueName="Id" AllowFiltering="false" HeaderText="Id"/>

<telerik:GridBoundColumn DataField="Name" UniqueName="Name" ShowFilterIcon="false"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

HeaderText="Case 1 - Incorrect - Loading panel will not be modal when filtering on this column by pressing the enter key">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Title" UniqueName="Title" ShowFilterIcon="true"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

HeaderText="Case 2 - Correct - Loading panel will still be modal when filtering on this column by clicking the filter button">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Code-behind

using System;

using System.Linq;

using System.Collections.Generic;

using System.Threading;

using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

Thread.Sleep(3000);

if (!this.IsPostBack)

{

this.BuildData();

}

protected void grid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

this.grid.DataSource = this.Data;

}

private List<SampleDataItem> Data

{

get

{

return (List<SampleDataItem>)this.ViewState["Data"];

}

set

{

this.ViewState["Data"] = value;

}

private void BuildData()

{

var query =

from i

in Enumerable.Range(1, 10000)

select new SampleDataItem()

{

Id = i,

Name = Guid.NewGuid().ToString(),

Title = Guid.NewGuid().ToString()

};

this.Data = query.ToList();

}

App_Code sample data item class

using System;

[Serializable]

public class SampleDataItem

{

public SampleDataItem()

{

}

public long Id

{

get;

set;

}

public string Name

{

get;

set;

}

public string Title

{

get;

set;

}

1 Answer, 1 is accepted

Accepted

answered on 22 Aug 2011, 03:48 PM

Hi Luke,

Indeed we managed to replicate the described issue and logged it for fixing by our developers. It is caused by a second ajax request being fired which breaks the first one and causes the loading panel to hide which is unexpected behavior.

You can find your Telerik points updated as a token of gratitude for reporting the problem.

In the meantime, you could try showing and hiding the loading panels explicitly in order to avoid the visual confusion.
http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html

Greetings,
Tsvetina
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>