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

Web Service

  • today
January 2012
January 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
1/30/2012 - 2/3/2012
  • Day
  • Week
  • Month
  • Timeline
8AM
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM
5PM
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...
  • Demo Configurator
Add a Category to My Calendar

Web Service binding allows the developer to improve performance by minimizing the HTML output and removing the need of a page refresh. In this mode RadScheduler does not postback to the page and the appointments are rendered on the client. To bind RadScheduler to a web service you need to set the WebServiceSettings property:

<telerik:RadScheduler runat="server" ID="RadScheduler1">
    <WebServiceSettings Path="SchedulerWebService.asmx" />
</telerik:RadScheduler>

Using Web Service binding requires a Data Provider. Check the SchedulerWebService.cs file for the implementation of the web service.

Filtering is achieved by sending additional information to the provider .

Uncheck or check a category from the RadPanelBar to filter RadScheduler by a resource.

This demo also uses a plug-in for jQuery - Templates. You can check the markup and the scripts involved in the .aspx files.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Scheduler.Examples.WebService.DefaultVB" %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <%--<Templates>--%>
    <script id="tmplAppDescription" type="text/x-jquery-tmpl">
        <div style='font-style: italic;'>${Description}</div>
    </script>
    <%--</Templates>--%>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function () {
                demo.scheduler = $find('<%=RadScheduler1.ClientID %>');
            });
            /* ]]> */
        </script>
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
   <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecorationZoneID="demo-settings" DecoratedControls="All" />
    <div class="demo-container no-bg">
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedView="WeekView" SelectedDate="2012-01-31"
            FirstDayOfWeek="Monday" LastDayOfWeek="Friday" StartEditingInAdvancedForm="false"
            OnClientAppointmentsPopulating="OnClientAppointmentsPopulating" OnClientAppointmentWebServiceInserting="OnClientAppointmentWebServiceInserting"
            EnableDescriptionField="true" OverflowBehavior="Auto" AppointmentStyleMode="Default"
            OnClientDataBound="onSchedulerDataBound" ShowAllDayRow="False">
            <AdvancedForm Modal="true"></AdvancedForm>
            <TimelineView GroupBy="Calendar" GroupingDirection="Vertical"></TimelineView>
            <WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide">
            </WebServiceSettings>
            <ResourceStyles>
                <%--AppointmentStyleMode must be explicitly set to Default (see above) otherwise setting BackColor/BorderColor
                        will switch the appointments to Simple rendering (no rounded corners and gradients)--%>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Personal" BackColor="#D0ECBB"
                    BorderColor="#B0CC9B"></telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Work" ApplyCssClass="rsCategoryOrange"></telerik:ResourceStyleMapping>
            </ResourceStyles>
            <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
            <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
        </telerik:RadScheduler>
    </div>

    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>
                <fieldset>
                    <legend>Add a Category to My Calendar</legend>
                    <ul class="fb-group">
                        <li>
                            <input id="chkPersonal" type="checkbox" title="Personal" onclick="rebindScheduler()"
                                value="Personal" checked="checked" name="Personal">
                            <label for="chkPersonal">Personal</label>
                        </li>
                        <li>
                            <input id="chkWork" type="checkbox" title="Work" onclick="rebindScheduler()" value="Work"
                                checked="checked" name="Work">
                            <label for="chkWork">Work</label>
                        </li>
                    </ul>
                </fieldset>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance