Scheduler - Resource Grouping

  • today
April, 2012
April, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Monday, April 16, 2012
  • Day
  • Week
  • Timeline
Pedro Afonso
Janette Limeira
Georg Pipps
Lucia Carvalho
all day
8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
Student Services Training Session I
Marketing 103
Business Data Catalog Of Office Sharepoint Server And SQL Server
Student Services Training Session II
Marketing 101
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This is another application scenario that demonstrates how you can manage different resources through the RadScheduler. In this instance you can book facilities for a variety of events.

In order to enable the resource grouping set the GroupBy property to the name of the resource, for example "Speaker". In addition, you can also group by date and resource - you need to add the "Date" keyword before the resource name. For example - GroupBy="Date, Speaker".

The direction of the grouping can be controlled with the GroupingDirection property.

This application also demonstrates how to customize the resource headers via ResourceHeaderTemplate.

Note the usage of the OnResourceHeaderCreated event to find controls inside the template.

For the purpose of this example the changes are persisted in the session and reset on each visit to the page.

Please note that the DateGrouping in DayView (both Horizontal and Vertical) actually has no difference from the Horizontal Resource Grouping. If you are looking for DateGrouping in DayView please refer to the layout Horizontal Resource Grouping.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.ResourceGrouping.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
        <div class="demo-container no-bg">
            <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" GroupBy="Speaker" GroupingDirection="Horizontal"
                OnNavigationCommand="RadScheduler1_NavigationCommand" SelectedDate="2012-04-16"
                AppointmentStyleMode="Default" DataSourceID="EventsDataSource" DataKeyField="ID"
                FirstDayOfWeek="Friday" LastDayOfWeek="Sunday" DataSubjectField="Description"
                DataStartField="Start" DataEndField="End" DataRecurrenceField="RecurrenceRule"
                SelectedView="DayView" DataRecurrenceParentKeyField="RecurrenceParentID" OnResourceHeaderCreated="RadScheduler1_ResourceHeaderCreated"
                OverflowBehavior="Auto">
                <AdvancedForm Modal="true"></AdvancedForm>
                <MonthView UserSelectable="false"></MonthView>
                <TimelineView />
                <ResourceHeaderTemplate>
                    <asp:Panel ID="ResourceImageWrapper" runat="server" CssClass="ResCustomClass">
                        <asp:Image ID="SpeakerImage" runat="server" AlternateText='<%# Eval("Text") %>'></asp:Image>
                    </asp:Panel>
                </ResourceHeaderTemplate>
                <ResourceTypes>
                    <telerik:ResourceType KeyField="SpeakerID" Name="Speaker" TextField="FullName" ForeignKeyField="SpeakerID"
                        DataSourceID="SpeakersDataSource"></telerik:ResourceType>
                </ResourceTypes>
                <ResourceStyles>
                    <telerik:ResourceStyleMapping Type="Speaker" Key="1" BackColor="#eb901b"></telerik:ResourceStyleMapping>
                    <telerik:ResourceStyleMapping Type="Speaker" Key="2" BackColor="#8fd21b"></telerik:ResourceStyleMapping>
                    <telerik:ResourceStyleMapping Type="Speaker" Key="3" BackColor="#278ce9"></telerik:ResourceStyleMapping>
                    <telerik:ResourceStyleMapping Type="Speaker" Key="4" BackColor="#f14db2"></telerik:ResourceStyleMapping>
                </ResourceStyles>
                <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
                <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
            </telerik:RadScheduler>
        </div>
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource ID="SpeakersDataSource" runat="server"
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>" SelectCommand="SELECT * FROM [Speakers]"
        >
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="EventsDataSource" runat="server"
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT * FROM [Grouping_Events]" InsertCommand="INSERT INTO [Grouping_Events] ([Description], [Start], [End], [RoomID], [RecurrenceRule], [RecurrenceParentID], [SpeakerID]) VALUES (@Description, @Start, @End, @RoomID, @RecurrenceRule, @RecurrenceParentID, @SpeakerID)"
        UpdateCommand="UPDATE [Grouping_Events] SET [Description] = @Description, [Start] = @Start, [End] = @End, [RoomID] = @RoomID, [RecurrenceRule] = @RecurrenceRule, [RecurrenceParentID] = @RecurrenceParentID, [SpeakerID] = @SpeakerID WHERE [ID] = @ID"
        DeleteCommand="DELETE FROM [Grouping_Events] WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="Description" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32" DefaultValue="1"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="SpeakerID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Description" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32" DefaultValue="1"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="SpeakerID" Type="Int32"></asp:Parameter>
        </InsertParameters>
    </asp:SqlDataSource>

    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <ul class="fb-group">
                    <li>
                        <asp:CheckBox runat="server" Text="Group by Speaker" Checked="true" AutoPostBack="true"
                            ID="GroupBySpeakerCheckBox" OnCheckedChanged="GroupBySpeakerCheckBox_CheckedChanged"></asp:CheckBox>
                    </li>
                    <li>
                        <asp:CheckBox runat="server" Text="Group by Date" AutoPostBack="true" ID="GroupByDateCheckBox"
                            OnCheckedChanged="GroupByDateCheckBox_CheckedChanged"></asp:CheckBox>
                    </li>
                    <li>
                        <qsf:ComboBox runat="Server" ID="GroupingDirectionComboBox" OnSelectedIndexChanged="GroupingDirectionComboBox_SelectedIndexChanged"
                            AutoPostBack="True" Label="Grouping Direction:">
                            <Items>
                                <telerik:RadComboBoxItem Text="Horizontal" Value="Horizontal" Selected="true"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Text="Vertical" Value="Vertical"></telerik:RadComboBoxItem>
                            </Items>
                        </qsf:ComboBox>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?