|
|
Rank: Advanced Member
Groups: Member
Joined: 2/11/2008
Posts: 37
|
I have a page with a DataList. The ItemTemplate for this DataList has a CallbackPanel and a number of fields, including a few DatePicker's.
This works pretty well, all the fields are set to AutoPostback and only the row that the control is in does the callback.
The problem is, when I get enough rows on the page (15 in my case), the javascript for the CallbackPanel spikes the CPU for about 8 to 10 seconds before the Loading text displays that I have set.
I do not get much of a delay or CPU spike when the number of rows is only 5 or so.
Any thoughts on what could be causing this? Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,221
|
Hi,
Most of the time it's the view state. Try to disable it when possible to reduce view state size.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/11/2008
Posts: 37
|
I store the viewstate on the server side because it was getting rather large. So I don't think that is it, but I will test it a bit to see if it affects the CallbackPanel spiking the CPU on the client.
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/11/2008
Posts: 37
|
Removing viewstate completely from the page did not get rid of the 8-10 second CPU spike/delay for the CallbackPanel. It did however break the panels, but that doesn't matter because I need viewstate anyway.
Any other thoughts on this? Thanks.
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/11/2008
Posts: 37
|
I removed the CallbackPanel's from each row and instead put the DataList inside one single CallbackPanel. I still get the 8-10 second pause before seeing the Loading message.
I'm going to make a separate demo project for this.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,221
|
Do you have a list box with a lot of items?
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/11/2008
Posts: 37
|
No I do not. I made the demo page. Your CallbackPanel does fine with a grid full of lots of checkboxes, dropdownlists, etc. but if I have 4 Datepickers in a row that's seems to be the tipping point, and it takes about 10 seconds pegged CPU before the loading is even shown.
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/11/2008
Posts: 37
|
Here is my example to demonstrate the slow handling of multiple Datepickers in a DataList by the CallbackPanel: CBPandDL.aspx:
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="CBPandDL.aspx.cs" EnableEventValidation="false" Inherits="EOTest.CBPandDL" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!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>EO CallbackPanel and the DataList</title>
<link href="EO.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
This is testing the CallbackPanel with a DataList
<br /><br /><br />
<eo:CallbackPanel ID="CallbackPanel1" runat="server" AutoDisableContents="True" Triggers="{ControlID:DataList1;Parameter:}" LoadingHTML="b>" >
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"RowNumber") %>'></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# DataBinder.Eval(Container.DataItem,"BoolValue") %>' AutoPostBack="True" />
</td>
<td>
<eo:DatePicker ID="DatePicker1" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon" selecteddatestring='<%# DataBinder.Eval(Container.DataItem, "DateValue", "{0:d}" ) %>' MaxValidDate="2100-01-01" MinValidDate="2000-01-01" AutoPostbackOnSelect="true" OnSelectionChanged="DatePicker1_SelectionChanged">
<TodayStyle CssClass="dpToday" />
<PickerStyle CssClass="dpPicker" />
<SelectedDayStyle CssClass="dpSelectedDay" />
<DisabledDayStyle CssClass="dpDisabledDay" />
<CalendarStyle CssClass="dpCalendar" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssClass="dpDayHover" />
<MonthStyle CssClass="dpMonth" />
<TitleStyle CssClass="dpTitle" />
<OtherMonthDayStyle CssClass="dpOtherMonth" />
<DayHeaderStyle CssClass="dpDayHeader" />
<DayStyle CssClass="dpDay" />
<TodayHoverStyle CssClass="dpTodayHover" />
</eo:DatePicker>
</td>
<td>
<eo:DatePicker ID="DatePicker2" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon" selecteddatestring='<%# DataBinder.Eval(Container.DataItem, "DateValue2", "{0:d}" ) %>' MaxValidDate="2100-01-01" MinValidDate="2000-01-01" AutoPostbackOnSelect="true" OnSelectionChanged="DatePicker2_SelectionChanged">
<TodayStyle CssClass="dpToday" />
<PickerStyle CssClass="dpPicker" />
<SelectedDayStyle CssClass="dpSelectedDay" />
<DisabledDayStyle CssClass="dpDisabledDay" />
<CalendarStyle CssClass="dpCalendar" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssClass="dpDayHover" />
<MonthStyle CssClass="dpMonth" />
<TitleStyle CssClass="dpTitle" />
<OtherMonthDayStyle CssClass="dpOtherMonth" />
<DayHeaderStyle CssClass="dpDayHeader" />
<DayStyle CssClass="dpDay" />
<TodayHoverStyle CssClass="dpTodayHover" />
</eo:DatePicker>
</td>
<td>
<eo:DatePicker ID="DatePicker3" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon" selecteddatestring='<%# DataBinder.Eval(Container.DataItem, "DateValue3", "{0:d}" ) %>' MaxValidDate="2100-01-01" MinValidDate="2000-01-01" AutoPostbackOnSelect="true" OnSelectionChanged="DatePicker3_SelectionChanged">
<TodayStyle CssClass="dpToday" />
<PickerStyle CssClass="dpPicker" />
<SelectedDayStyle CssClass="dpSelectedDay" />
<DisabledDayStyle CssClass="dpDisabledDay" />
<CalendarStyle CssClass="dpCalendar" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssClass="dpDayHover" />
<MonthStyle CssClass="dpMonth" />
<TitleStyle CssClass="dpTitle" />
<OtherMonthDayStyle CssClass="dpOtherMonth" />
<DayHeaderStyle CssClass="dpDayHeader" />
<DayStyle CssClass="dpDay" />
<TodayHoverStyle CssClass="dpTodayHover" />
</eo:DatePicker>
</td>
<td>
<eo:DatePicker ID="DatePicker4" runat="server" ControlSkinID="None" DayCellHeight="16"
DayCellWidth="19" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" TitleRightArrowImageUrl="DefaultSubMenuIcon" selecteddatestring='<%# DataBinder.Eval(Container.DataItem, "DateValue4", "{0:d}" ) %>' MaxValidDate="2100-01-01" MinValidDate="2000-01-01" AutoPostbackOnSelect="true" OnSelectionChanged="DatePicker4_SelectionChanged">
<TodayStyle CssClass="dpToday" />
<PickerStyle CssClass="dpPicker" />
<SelectedDayStyle CssClass="dpSelectedDay" />
<DisabledDayStyle CssClass="dpDisabledDay" />
<CalendarStyle CssClass="dpCalendar" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssClass="dpDayHover" />
<MonthStyle CssClass="dpMonth" />
<TitleStyle CssClass="dpTitle" />
<OtherMonthDayStyle CssClass="dpOtherMonth" />
<DayHeaderStyle CssClass="dpDayHeader" />
<DayStyle CssClass="dpDay" />
<TodayHoverStyle CssClass="dpTodayHover" />
</eo:DatePicker>
</td>
<td>
<asp:Button ID="btnUpdate" OnClick="btnUpdate_Click" runat="server" Text="Update"></asp:Button>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</eo:CallbackPanel>
</div>
</form>
</body>
</html>
CBPandDL.aspx.cs:
Code: C#
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace EOTest
{
public partial class CBPandDL : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataList1.DataSource = GenerateDataset();
DataList1.DataBind();
}
}
private DataSet GenerateDataset()
{
DataSet ds = new DataSet();
DataTable dt = ds.Tables.Add();
dt.Columns.Add("RowNumber", typeof(int));
dt.Columns.Add("BoolValue", typeof(bool));
dt.Columns.Add("DateValue", typeof(DateTime));
dt.Columns.Add("DateValue2", typeof(DateTime));
dt.Columns.Add("DateValue3", typeof(DateTime));
dt.Columns.Add("DateValue4", typeof(DateTime));
for (int i = 0; i < 15; i++)
{
DataRow row = dt.NewRow();
row[0] = i;
row[1] = false;
row[2] = DateTime.Now.AddDays(i);
row[3] = DateTime.Now.AddDays(i+1);
//row[4] = DateTime.Now.AddDays(i + 2);
row[5] = DateTime.Now.AddDays(i + 3);
dt.Rows.Add(row);
}
return ds;
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
}
protected void DatePicker1_SelectionChanged(object sender, EventArgs e)
{
}
protected void DatePicker2_SelectionChanged(object sender, EventArgs e)
{
}
protected void DatePicker3_SelectionChanged(object sender, EventArgs e)
{
}
protected void DatePicker4_SelectionChanged(object sender, EventArgs e)
{
}
}
}
EO.css
Code: CSS
.dpCalendar {background-color:white;border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:tahoma;font-size:9px;padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px}
.dpDayHeader {border-bottom-color:#aca899;border-bottom-style:solid;border-bottom-width:1px;font-family:tahoma;font-size:12px}
.dpDay {border-bottom-color:white;border-bottom-style:solid;border-bottom-width:1px;border-left-color:white;border-left-style:solid;border-left-width:1px;border-right-color:white;border-right-style:solid;border-right-width:1px;border-top-color:white;border-top-style:solid;border-top-width:1px;font-family:tahoma;font-size:12px}
.dpDayHover {border-bottom-color:#fbe694;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#fbe694;border-left-style:solid;border-left-width:1px;border-right-color:#fbe694;border-right-style:solid;border-right-width:1px;border-top-color:#fbe694;border-top-style:solid;border-top-width:1px;font-family:tahoma;font-size:12px}
.dpToday {border-bottom-color:#bb5503;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#bb5503;border-left-style:solid;border-left-width:1px;border-right-color:#bb5503;border-right-style:solid;border-right-width:1px;border-top-color:#bb5503;border-top-style:solid;border-top-width:1px;font-family:tahoma;font-size:12px}
.dpDisabledDay {border-bottom-color:white;border-bottom-style:solid;border-bottom-width:1px;border-left-color:white;border-left-style:solid;border-left-width:1px;border-right-color:white;border-right-style:solid;border-right-width:1px;border-top-color:white;border-top-style:solid;border-top-width:1px;color:gray;font-family:tahoma;font-size:12px}
.dpOtherMonth {border-bottom-color:white;border-bottom-style:solid;border-bottom-width:1px;border-left-color:white;border-left-style:solid;border-left-width:1px;border-right-color:white;border-right-style:solid;border-right-width:1px;border-top-color:white;border-top-style:solid;border-top-width:1px;color:gray;font-family:tahoma;font-size:12px}
.dpMonth {cursor:pointer;cursor:hand;font-family:tahoma;font-size:12px;margin-left:14px;margin-right:14px}
.dpSelectedDay {background-color:#fbe694;border-bottom-color:white;border-bottom-style:solid;border-bottom-width:1px;border-left-color:white;border-left-style:solid;border-left-width:1px;border-right-color:white;border-right-style:solid;border-right-width:1px;border-top-color:white;border-top-style:solid;border-top-width:1px;font-family:tahoma;font-size:12px}
.dpTitleArrow {cursor:pointer;cursor:hand}
.dpTitle {background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px}
.dpPicker { font-family:Courier New; padding-left:5px; padding-right: 5px; }
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,221
|
Thanks for the code. We will look into it and see what we can find.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,221
|
Hi,
We looked into the issue and confirmed that the slowless is indeed caused by the DatePicker. Each DatePicker renders a JavaScript segment to initialize the DatePicker control and when the CallbackPanel tries to update the page, it tries to parse the result string and separate all the JavaScript segments from the regular HTML output. IE seems to have reached a tipping point when the string to be parsed gets over a certain limit.
The best work around is to reduce the number of DatePicker control. You should rarely use these many DatePicker control in a single page because it's a rather heavy control. Instead you can take a look of our Grid control, It supports DateTimeColumn which displays a DatePicker control only when the cell is in edit mode. This way it only uses one DatePicker control per column.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/11/2008
Posts: 37
|
Thank you for getting back to me on this.
I actually tried to recreate the page I need using your grid control and things were chugging along happily until I came to the point where I needed to implement MinValidDate and MaxValidDate on each date cell differently based on business rules. I do not see how to do this at all. I've previously posted asking about setting the valid dates on the client side and was told it isn't possible, so I tried setting the datepicker columns to autopostback but from there I'm not sure if it can really be done - I don't have it working but I think it will just change the valid dates per column and not per column AND row.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,221
|
Hi,
Yes. Changing MinValidDate and MaxValidDate on client side is on our list and should be implemented pretty soon.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 2/11/2008
Posts: 37
|
Ah, thank you. Good to hear, I look forward to it.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,221
|
Changing MinValidDate and MaxValidDate on the client side has been implemented in build 2007.2.55.
|
|