Fixed Resource Headers

[Ryan]

Hi there,

I am having some difficulty figuring if it is possible to have static resource headers with the Scheduler.
So basically I want the resource headers to remain at the top of the scheduler area when scrolling vertically.
I played around a bit with the HeaderTemplate but couldn't get what I wanted, and can't find any documentation about this.

Any suggestions?

[Veronica]

Hello Ryan,

Unfortunately it is not possible to have fixed resource headers at this moment. We'll think of implementing this in the future.

Please accept my apologies for the caused inconvenience.

Kind regards,
Veronica Milcheva
the Telerik team

[Ryan]

OK no worries, it would be a nice feature especially when the scheduler is being used in very small time blocks (ie. 10 minutes) as this results in a lot of vertical scrolling needed to use the control.

Thanks for the reply.

[Veronica]

Hi Ryan,

Actually after further investigation I saw that the Resource Headers are fixed and go down when you start scrolling down. Could you please show me your code so I can inspect it and help you?

Best wishes,
Veronica Milcheva
the Telerik team

[Ryan]

Sure no worries, here is the .aspx code for the scheduler:

<telerik:RadScheduler ID="tripScheduler" runat="server" DataKeyField="ID" DataSubjectField="Subject"

     DataStartField="Start" DataEndField="End" EnableDatePicker="False" EnableEmbeddedScripts="true"

     ShowAllDayRow="false" ShowNavigationPane="false" ShowFooter="false" EnableAdvancedForm="false"

     Height="900px" Width="920px" RowHeight="20px" MinutesPerRow="10" HoursPanelTimeFormat="h:mm tt"

     NumberOfHoveredRows="1" AllowEdit="true" AllowDelete="true" AllowInsert="false" ColumnWidth="215px"

     Localization-ConfirmDeleteText="Unschedule this appointment?" CssClass="paddingTop10"

     OnAppointmentCommand="tripScheduler_AppointmentCommand"

     OnTimeSlotCreated="tripScheduler_TimeSlotCreated"

     OnAppointmentUpdate="tripScheduler_AppointmentUpdate"

     OnAppointmentDelete="tripScheduler_AppointmentDelete"

     CustomAttributeNames="PickupAddress,PickupSuburb,PickupBy,DropoffAddress,DropoffSuburb,DropoffBy,TripType,TripID,TimingSummary,EstDistance,EstDuration,Passengers,PassengerList,Comments,ShortApptClass">
<TimelineView UserSelectable="false" />
<WeekView UserSelectable="false" />
<MonthView UserSelectable="false" />
<DayView UserSelectable="false" DayStartTime="05:00:00" DayEndTime="23:00:00" />
<AppointmentTemplate>....(code removed).....</AppointmentTemplate>

<telerik:RadScheduler>

[Veronica]

Hello Ryan,

Thank you for the code.

Could you please be more specific on that which headers do you expect to be static?
 
I've grouped the RadScheduler horizontally by resources so that the resource headers are on top. When I scroll down - the resource headers are moving along with the scroll. Please take a look at the attached sample project that I created for you.

Regards,
Veronica Milcheva
the Telerik team

[Ryan]

Hey Veronica,

Thanks for your reply. I guess the major difference here is that I am binding appointment objects to the scheduler in code-behind, whereas you are setting the GroupBy attribute on the scheduler markup. Also, I am using two resource groups - drivers and funding sources (the funding source is just used to set appointments to be a certain colour based on the source). Would this make a difference? Because apart from that, there is no difference between your code and mine.

In the Page_Load event, I am setting the GroupBy attribute for the scheduler like this:  tripScheduler.GroupBy = "DriverVehicle";

Here is the code demonstrating how I am creating resources:

// Load scheduler resources
private void InitResources()

     {

          tripScheduler.ResourceTypes.Clear();

          tripScheduler.Resources.Clear();

 

          // Scheduled driver-vehicles

          ResourceType resTypeDriverVehicle = new ResourceType("DriverVehicle");

          resTypeDriverVehicle.ForeignKeyField = "DriverVehicleID";

          tripScheduler.ResourceTypes.Add(resTypeDriverVehicle);

 

          ScheduledDriverVehicle[] sdvToday = ScheduledDriverVehicle.GetDriverVehiclesForDate(DateTime.Parse(txtDate.Text), serviceProvider.ID);

          foreach (ScheduledDriverVehicle sdv in sdvToday)

              tripScheduler.Resources.Add(new Resource("DriverVehicle", sdv.ID, sdv.SummaryTextLong));

 

          if (sdvToday.Length == 0) // if no drivers scheduled today, show message div and hide scheduler body

          {

                tripScheduler.Visible = false;

                divNoDrivers.Visible = true;

            }

            else

            {

                tripScheduler.Visible = true;

                divNoDrivers.Visible = false;

            }

 

            // Initialize funding resources

            ResourceType resTypeFunding = new ResourceType("TripFunding");

            resTypeFunding.ForeignKeyField = "FundingID";

            tripScheduler.ResourceTypes.Add(resTypeFunding);

 

            TripFunding[] fundingTypes = TripFunding.GetFundingForProvider(serviceProvider.ID);

            foreach (TripFunding funding in fundingTypes)

            {

                tripScheduler.Resources.Add(new Resource("TripFunding", funding.ID, funding.Name));

                string cssClass = TripFunding.ColoursToClasses[funding.Colour]; // maps the colour to a CSS class

                tripScheduler.ResourceStyles.Add(new ResourceStyleMapping("TripFunding", funding.ID.ToString(), funding.Name, cssClass));

            }

            

        }

[Veronica]

Hi Ryan,

I am interested where do you call the InitResources() method. Could you please send me your project so I can inspect it and help you?

Regards,
Veronica Milcheva
the Telerik team

[Matthew]

Hi Veronica,

I'm also looking for a way to have the resource headers fixed, only using a scheduler whose overflow behaviour is set as "Expand".  So in the example you provided, substituting the height attribute for OverflowBehavior="Expand" in the tag declaration.  There appears to be a div tag within the rendered HTML that looks ripe for the fixing: 

<div class="rsInnerFix" style="overflow:hidden;">
    <table class="rsHorizontalHeaderTable" cellpadding="0" cellspacing="0" border="0" style="height:25px;width:645px;">
        <tbody><tr>
            <th><div>
                Alex
            </div></th><th><div>
                Bob
            </div></th><th><div>
                Charlie
            </div></th>
        </tr>
    </tbody></table>
</div>

The div with the class of "rsInnerFix" seems to be one that could be converted to be fixed in position?  However, my limited CSS skills have let me down and I can't figure it out.  The class name itself seems to suggest that someone at Telerik had fixing this div in mind - is there a way to do this with CSS?

[Veronica]

Hello Matthew,

When you set the OverflowBehavior of the RadScheduler to Expand - you will loose the vertical scroll in the RadScheduler. You can scroll down only with the vertical scroller provided by the browser and that's why the Resource Headers are not moving down as the "sticky headers" functionality is not provided when using the browser's scroller.

Please let me know if you have further questions.

All the best,
Veronica Milcheva
the Telerik team

[Matthew]

Thanks Veronica.

Yes, I am aware that is the default behaviour, but I was hoping that someone at Telerik might be able to provide a workaround for what I am trying to achieve.