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?
Thanks!
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?
Thanks!
1 Answer, 1 is accepted
0
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.
Regards,
Dimo
the Telerik team
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.Calendar.SpecialDays.Clear(); 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(); e.Cell.Controls.Add(label); RadCalendarDay calendarDay = new RadCalendarDay(); calendarDay.Date = e.Day.Date; calendarDay.IsSelectable = false; calendarDay.ItemStyle.CssClass = otherMonthCssClass; RadDatePicker1.Calendar.SpecialDays.Add(calendarDay); } } </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>RadControls for ASP.NET AJAX</title> </head> <body> <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 = ""; } } </script> <telerik:RadDatePicker ID="RadDatePicker1" runat="server"> <Calendar runat="server" FirstDayOfWeek="Monday" OnDayRender="Calendar_OnDayRender"> <ClientEvents OnDayRender="OnDayRender" /> </Calendar> </telerik:RadDatePicker> </form> </body> </html>Regards,
Dimo
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