rendering multiple Calendars bloats html, bogs down page

Question

note: I am using the Infragistics control because this is inherited legacy code, but I am not above rewritting with an ASP.NET control if that is a better solution.

I have a Repeater control that uses an Infragistics WebDateChooser to select a date for a record. Let's say each item in the Repeater represents a customer, and I am selecting an activation date or something of that nature. It could be any time past, present, or future.

When you render this control 20 times, it writes all of the heavy html for showing all of the dates (month names, weekdays, etc etc) 20 times and bloats the html dramatically. This causes the browser to really struggle with rendering the page in any reasonable amount of time, even for 20 records (paging implemented on the repeater just to prevent the browser from crashing on massive page). This is also true to a lesser (but still significant) degree with the standard ASP.NET calendar control.

What I'm looking for is a way to possibly make all 20 date choosers share the resources of 1 calendar so they don't each need to render their own strings and crap for displaying verbose dates.

EDIT: I understand many users have not used Infragistics, but it's still just as true with the standard, built in ASP:Calendar control. Put one in a repeater and display n > 20 times. It bogs down the browser when rendering.

Also, just to clarify incase this matters to anyone's potential solution, this codebase is on .NET 2.0 and has to support IE6.

Answer 1

I haven't used the control you are so I can't say if this one will work for you but I highly recommend: http://www.dynarch.com/projects/calendar/ It's a javascript calendar so the user will only download the js includes once. After that the creation calls are just a few lines.

It's not immediately "drag-and-drop" compatible with ASP.Net. I recommend wrapping it in a user control.

Answer 2

A valient attempt.

http://community.infragistics.com/forums/p/8350/96879.aspx

I may try this, but I would still like to hear options that involve sharing the calendar resources without downloading some .js file off of some guy's blog.

Answer 3

Another thing you might consider is to have one instance of the calendar on the page. When the user clicks a textbox that "activates" the calendar, you can use a client-side javascript framework like jquery to show the calendar and move it the correct expected position. Once the date is selected, store the selected date in the correct text box and hide the calendar again. You'll have to write some javascript but it beats downloading all the extra bloat!

Answer 4

While it doesn't unify into one instance of the control, could you use the CalendarExtender that comes with the AjaxControlToolkit. I just built a small example on my machine and it didn't bog the page down that much.

Answer 5

Well the example at Infragistics definitly shows that the control was built to be reused like this. They aren't using a Repeater of course but it all works the same in the end. I would look into how the UltraGridColumn is working with the WebDateChooser to display the dropdown. Of course, this won't help with the more general problem. For that I would do as the others say and create one control and use javascript to display it where it is needed, when it is needed.
If you really don't want to write any javascript yourself you can take advantage of the toolkits. You could create an instance of whatever calendar (not the dropdown version) and use the AjaxControlToolkit's modalpopup, Infragistic's WebDialogWindow or something similar (perhaps with less dialogy more floaty) to display it.

In the end all the options have one thing in common. They create a single calendar outside of the repeater and display that instance of the calendar on demand.

Answer 6

If what you are looking for is a Datepiker that is called and displayed on each date field in a grid, calling a JavaScript calendar is the most efficient. Check out the JQuery ui calendar and just put the call on each field -- see: jqueryui.com/demos/.

HTML -- note the class is the same and ID different:

<input type="text" class="datepicker" id="d1" />
<input type="text" class="datepicker" id="d2" />

JQuery then selects the css class:

$(.datepicker.each(function() {
  $(this).datepicker();
});

The older ASP.Net solution is for a control to be declared and dynamically instantiated on the server when the click even is fired. There are many example of this on lots of blogs. Or 20 of them can be created on page load and placed in a datagrid or something. But what if the datagrid has 100 entries? It cannot scale.

But there is a calendar in the AJAX control toolkit that is created once on a panel and then that panel is displayed where you tell it. It is one calendar, shown many times.

<asp:Panel ID="panelCal" runat="server">      
  <asp:UpdatePanel ID="update" runat="server">           
    <ContentTemplate>   
    <asp:Calendar ID="theonlyCal"runat="server"/>           
    </ContentTemplate>      
  </asp:UpdatePanel>
</asp:Panel>

Now say there are 20 rows:

<asp:TextBox ID="twenty" runat="server" />

Now each text box needs a popup control extender.

<ajaxToolkit:PopupControlExtenderID="twentExtenders"runat="server"
TargetControlID="twenty"
PopupControlID="panelCal" 
Position="Bottom" />

ASP.NET AJAX can use lots of bandwidth.