Shared Calendar/TimeView with RadPanelBar

[Diana]

Hello,

I have a webpage where I use 13 RadDateTime Pickers. This impacts the performance and increases the size of my page; so I tried to implement the "Shared Calendar/TimeView" concept as in here: http://www.telerik.com/help/aspnet-ajax/calendar-shared-calendars.html

My page consists of an upper div that has 4 of these DateTime Pickers and then a RadPanelBar that has 3 RadPanelBar items each of which has an item template that contains some DateTime Pickers along other controls.

As you advised in the link I posted above, I defined the shared Calendar and shared TimeView first thing in the page, they preceed the other DateTime Pickers that use them. However, the problem I encountered is that the shared controls that I defined in the upper level of the page are not defined to the ones inside any of the RadPanelBar items. That is, I had to use 4 shared Calendars and TimeViews: one for the upper div, and one for each of the 3 RadPanelBar items as each one is only seeing what's in its scope.

This doesn't serve my case, the performace is still bad and the page size is big. So is there any solution to this case? How can I use only one shared Calendar and TimeView for the whole page and still get all the DateTime Pickers in the RadPanelBar and page in general see them?

Many Thanks!

[Diana]

Anyone?

[Kevin]

Hello Diana,

This is how I do it on my pages:

public void EnableSharedCalendar(Page page)
    {
        EnableSharedCalendar(page, page.Form);
    }
    public void EnableSharedCalendar(Page page, Control calendarPlaceholder)
    {
        // create shared calendar
        RadCalendar calShared = new RadCalendar();
        calShared.ID = "calShared";
        calShared.ShowOtherMonthsDays = false;
        calShared.ShowRowHeaders = false;
        calShared.UseColumnHeadersAsSelectors = false;
        calShared.UseRowHeadersAsSelectors = false;
        calShared.EnableMultiSelect = false;

        // add it to calendar placeholder
        calendarPlaceholder.Controls.Add(calShared);

        // loop through page controls to find date picker controls
        FindDatePickers(page, calShared);
    }

    public void FindDatePickers(Control ctrl, RadCalendar calShared)
    {
        if (ctrl != null)
        {
            foreach (Control c in ctrl.Controls)
            {
                if (c is RadDatePicker)
                {
                    ((RadDatePicker)c).SharedCalendar = calShared;
                }
                else
                {
                    FindDatePickers(c, calShared);
                }
            }
        }
    }

I created the overload just in case I wanted to pass it another control, but all you need to use is the first one, as it will add the control to the form. You can apply same logic for the RadTimePickers as well.

I hope that helps.

[Kevin]

You will have to call that method in your Page_Load or Page_PreRender event, whichever one works for you.

[Diana]

Thank you Kevin. I will try this solution. But does the same concept work client-side? I mean in JavaScript?

[Kevin]

This wouldn't work on the client-side. The SharedCalendar/SharedTimeView need to be set server-side. What my code does is ensure that only one Calendar or TimeView control is sent to the browser and shared by all controls of that type.