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

Drag-and-Drop From RadGrid to RadScheduler

Next database reset in 1 hours, 16 minutes, 48 seconds
  • today
April 2024
April 2024
SMTWTFS
 123456
78910111213
14151617181920
21222324252627
282930    
       
Saturday, April 20, 2024
  • Day
  • Week
  • Month
  • Timeline
all day
8AM
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM
5PM
  • Edit
  • Delete
  • New Appointment
  • Go to today
  • Show 24 hours...
TaskDue Date Priority 
Add new task    
No records to display.

This example demonstrates how to implement drag-and-drop support from RadGrid to RadScheduler.

When a task is dragged from RadGrid to RadScheduler, the time slot which will receive the appointment is highlighted. After the task is dropped, it appears in RadScheduler as an appointment, but it is removed from the RadGrid. This is achieved by updating the data sources of both controls and refreshing them with a call to the Rebind() method.

Clicking the Unschedule button (implemented via AppointmentTemplate) removes the appointment and sends it back to the task list of the RadGrid. In contrast, deleting an appointment removes the appointment altogether, both from RadScheduler and RadGrid controls.

The RadGrid control gives the ability to insert a new appointment (by clicking the Add new task LinkButton), to update an appointment (by double clicking the appointment), and to delete an appointment (by clicking on the image button in the rightmost column).

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

<%@ 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 rel="stylesheet" href="styles.css" 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:RadScriptBlock runat="Server" ID="RadScriptBlock1">
        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function () {
                demo.scheduler = $find("<%= RadScheduler1.ClientID %>");
                demo.targetSlotHiddenFieldId = "<%=TargetSlotHiddenField.ClientID %>";
            });
            /* ]]> */
        </script>
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" EnableAJAX="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container no-bg">
        <input type="hidden" runat="server" id="TargetSlotHiddenField" />
        <telerik:RadSplitter RenderMode="Lightweight" runat="server" ID="RadSplitter1" Height="552px" Width="100%"
            CssClass="exampleContainer" Orientation="Horizontal" Skin="Metro">
            <telerik:RadPane runat="server" ID="TopPane" Height="400px" Scrolling="None">
                <telerik:RadScheduler RenderMode="Lightweight" ID="RadScheduler1" runat="server" Skin="Metro"
                    Width="100%" RowHeaderWidth="52" OverflowBehavior="Auto" ShowFooter="false" DataSourceID="SchedulerDataSource"
                    DataKeyField="AppointmentID" DataStartField="Start" DataEndField="End" DataSubjectField="Subject"
                    CustomAttributeNames="Due, Priority" RowHeight="37px" OnAppointmentCommand="RadScheduler1_AppointmentCommand"
                    OnAppointmentInsert="RadScheduler1_AppointmentInsert">
                    <AdvancedForm Modal="true"></AdvancedForm>
                    <AppointmentTemplate>
                        <%# Eval("Subject") %>
                        <asp:Button runat="server" ID="UnscheduleAppointment" CssClass="simpleButton" CommandName="Unschedule"
                            Text="&nbsp;" ToolTip="Unschedule this appointment"></asp:Button>
                    </AppointmentTemplate>
                    <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
                    <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
                </telerik:RadScheduler>
            </telerik:RadPane>
            <telerik:RadSplitBar runat="Server" ID="RadSplitBar1">
            </telerik:RadSplitBar>
            <telerik:RadPane runat="server" ID="BottomPane">
                <div style="float: left; height: 100%; width: 55px; background: #E3EFFF; text-align: center; border-right: 1px solid #6593CF;">
                    <img src="images/tasks.gif" alt="" />
                </div>
                <div style="margin-left: 56px; border: none;">
                    <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="RadGrid1" DataSourceID="GridDataSource" GridLines="None"
                        AutoGenerateColumns="False" OnRowDrop="RadGrid1_RowDrop" Skin="Metro" Style="border: none; outline: 0"
                        Height="100%" AllowAutomaticInserts="True" AllowAutomaticUpdates="true"
                        AllowAutomaticDeletes="true" ShowFooter="true" OnItemCreated="RadGrid1_ItemCreated"
                        OnItemCommand="RadGrid1_ItemCommand" AllowSorting="true">
                        <ClientSettings AllowRowsDragDrop="True">
                            <Selecting AllowRowSelect="True"></Selecting>
                            <ClientEvents OnRowDropping="rowDropping" OnRowDblClick="onRowDoubleClick"></ClientEvents>
                        </ClientSettings>
                        <MasterTableView DataKeyNames="AppointmentID" InsertItemDisplay="Bottom" EditMode="InPlace">
                            <SortExpressions>
                                <telerik:GridSortExpression FieldName="Due" SortOrder="Ascending"></telerik:GridSortExpression>
                            </SortExpressions>
                            <Columns>
                                <telerik:GridTemplateColumn DataField="Subject" HeaderText="Task">
                                    <ItemTemplate>
                                        <asp:Label runat="server" ID="Label1" Text='<%# Bind("Subject") %>'></asp:Label>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        <asp:LinkButton Text="Add new task" CommandName="<%# RadGrid.InitInsertCommandName %>"
                                            runat="server" ID="LinkButton1"></asp:LinkButton>
                                    </FooterTemplate>
                                    <EditItemTemplate>
                                        <asp:TextBox runat="Server" ID="TextBox1" Text='<%# Bind("Subject") %>' Width="100%"></asp:TextBox>
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridDateTimeColumn DataField="Due" HeaderText="Due Date" DataFormatString="{0:d}"
                                    HeaderStyle-Width="300px">
                                </telerik:GridDateTimeColumn>
                                <telerik:GridTemplateColumn DataField="Priority" HeaderText="Priority" HeaderStyle-Width="300px">
                                    <ItemTemplate>
                                        <asp:Label runat="Server" ID="Label2" Text='<%#Bind("Priority") %>'></asp:Label>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="priorityComboBox" SelectedValue='<%#Bind("Priority") %>'
                                            Skin="Office2007" Width="80px">
                                            <Items>
                                                <telerik:RadComboBoxItem Text="High" Value="High"></telerik:RadComboBoxItem>
                                                <telerik:RadComboBoxItem Text="Medium" Value="Medium"></telerik:RadComboBoxItem>
                                                <telerik:RadComboBoxItem Text="Low" Value="Low"></telerik:RadComboBoxItem>
                                            </Items>
                                        </telerik:RadComboBox>
                                        <asp:LinkButton ID="btnUpdate" Text="Save" runat="server" CommandName='<%# (Container is GridDataInsertItem) ? RadGrid.PerformInsertCommandName : RadGrid.UpdateCommandName %>'></asp:LinkButton>
                                        <asp:LinkButton ID="btnCancel" Text="Cancel" runat="server" CommandName='<%# RadGrid.CancelCommandName %>'></asp:LinkButton>
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridButtonColumn ConfirmText="Delete this Appointment?" ButtonType="ImageButton"
                                    CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                                    <HeaderStyle Width="20px"></HeaderStyle>
                                    <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                                </telerik:GridButtonColumn>
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>
                </div>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    <asp:SqlDataSource ID="SchedulerDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        DeleteCommand="DELETE FROM [Appointments_DragAndDrop] WHERE [AppointmentID] = @AppointmentID"
        InsertCommand="INSERT INTO [Appointments_DragAndDrop] ([Start], [End], [Subject]) VALUES (@Start, @End, @Subject)"
        SelectCommand="SELECT * FROM [Appointments_DragAndDrop]" UpdateCommand="UPDATE [Appointments_DragAndDrop] SET [Start] = @Start, [End] = @End, [Subject] = @Subject WHERE [AppointmentID] = @AppointmentID">
        <DeleteParameters>
            <asp:Parameter Name="AppointmentID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
            <asp:Parameter Name="AppointmentID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="GridDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        DeleteCommand="DELETE FROM [Appointments_DragAndDrop] WHERE [AppointmentID] = @AppointmentID"
        InsertCommand="INSERT INTO [Appointments_DragAndDrop] ([Subject], [Due], [Priority]) VALUES (@Subject, @Due, @Priority)"
        SelectCommand="SELECT * FROM [Appointments_DragAndDrop] WHERE ([Start] IS NULL) AND ([End] IS NULL)"
        UpdateCommand="UPDATE [Appointments_DragAndDrop] SET [Subject] = @Subject, [Start] = @Start, [End] = @End, [Due] = @Due,  [Priority] = @Priority  WHERE [AppointmentID] = @AppointmentID">
        <DeleteParameters>
            <asp:Parameter Name="AppointmentID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="Priority" Type="String"></asp:Parameter>
            <asp:Parameter Name="Due" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Due" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="Priority" Type="String"></asp:Parameter>
            <asp:Parameter Name="AppointmentID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance