New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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
pruebas
8AM
​
9AM
​
10AM
​
11AM
​
12PM
​
1PM
​
2PM
​
3PM
​
4PM
​
5PM
​
test
test 2
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...
  • Demo Configurator

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="true" Inherits="Scheduler.Examples.ResourceGrouping.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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>
<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>

Support & Learning Resources

Find Assistance