Shared Calendar/TimeView with RadPanelBar

6 posts, 0 answers
  1. Diana
    Diana avatar
    18 posts
    Member since:
    Nov 2012

    Posted 05 Mar 2013 Link to this post

    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!
  2. Diana
    Diana avatar
    18 posts
    Member since:
    Nov 2012

    Posted 09 Mar 2013 Link to this post

    Anyone?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 11 Mar 2013 Link to this post

    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.
  5. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 11 Mar 2013 Link to this post

    You will have to call that method in your Page_Load or Page_PreRender event, whichever one works for you.
  6. Diana
    Diana avatar
    18 posts
    Member since:
    Nov 2012

    Posted 12 Mar 2013 Link to this post

    Thank you Kevin. I will try this solution. But does the same concept work client-side? I mean in JavaScript?
  7. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 13 Mar 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017