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

Improving performance of date picker

1 Answer 48 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
TonyG asked on 27 Oct 2010, 11:33 PM
I have a page with essentially three user controls:
1) Contains only a listbox for selection of a location
2) Contains only a date picker.
3) Contains a grid which dynamically changes based on the selections above.

For the date picker we're limiting selection to the "first" day of the week, which may be different depending on the location.  The styling of the first day is different than other days so users know what can be clicked.  So there is an event attached to 4-5 dates per month, and some custom styling.

If date selection is limited to something like 2 months back and 1 month forward, the unique styling is limited, so the control weighs in at only about 11k.  Recently the client asked to allow selection to go back up to one  year back and any time in the future.  After this change the control consumed close to 7MB and overall app performance tanked.  The client is now reconsidering whether that's a "nice to have" feature or a real requirement.  I suspect they will prefer better performance over a long-term date selection.

But I'd like to work out the best way to approach this.  I'm thinking I can limit the control to a few months back and forward, and when they click on Previous or Next outside of the current scope, I can use code behind to regenerate the control with a wider range in the chosen direction.  But that requires more postbacks and that itself will affect performance.

So is there an elegant way to go about managing this?  What about some in-depth detail on doing this on the client side?  Is this a good application for some rigorous JavaScript?

Another thing I'm thinking is that for this specific application we don't really need to see every day of every week, since they can only select one day from any week.  Can we limit the number of days displayed in the calendar control, or might I need to create/find a custom control that elegantly renders only the first day of every week?


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 28 Oct 2010, 02:40 PM
Hello TonyG,

I don't know what is your implementation and how you manage to make the RadDatePicker 11 MB, but here is an example, which shows how to enable only Monday selection for all dates in the control's range.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
        bool IsAlreadyLoaded = false;
        if (!Page.IsPostBack)
        if (!IsAlreadyLoaded)
            RadDatePicker1.SelectedDate = DateTime.Now;
            IsAlreadyLoaded = true;
    protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)
        if (e.Day.Date.DayOfWeek != DayOfWeek.Monday)
            string otherMonthCssClass = "rcOutOfRange";
            e.Cell.Text = "";
            e.Cell.CssClass = "rcOutOfRange";
            Label label = new Label();
            label.Text = e.Day.Date.Day.ToString();
            RadCalendarDay calendarDay = new RadCalendarDay();
            calendarDay.Date = e.Day.Date;
            calendarDay.IsSelectable = false;
            calendarDay.ItemStyle.CssClass = otherMonthCssClass;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
function OnDayRender(calendarInstance, args)
    var jsDate = new Date(args._date[0], args._date[1] - 1, args._date[2]); 
    if (jsDate.getDay() != 1) { 
        var otherMonthCssClass = "rcOutOfRange";
        args.get_cell().className = otherMonthCssClass; 
        args.get_cell().innerHTML = "<span>" + args._date[2] + "</span>"; 
        args.get_cell().DayId = ""; 
<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <Calendar runat="server" FirstDayOfWeek="Monday" OnDayRender="Calendar_OnDayRender">
        <ClientEvents OnDayRender="OnDayRender" />

the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question