Grid - Drag-and-drop From Grid to Scheduler

Next database reset in 0 hours, 16 minutes, 0 seconds
  • today
October, 2017
October, 2017
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
Thursday, October 19, 2017
  • 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    
Take the car to the service 1/26/2009 High
Pick up the kids from school 1/26/2009 Medium
Buy present for Charlie 1/26/2009 Low
Take the dog to the vet 1/26/2009 Medium
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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).

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

<%@ 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 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">
        <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="880px"
            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="200px">
                                </telerik:GridDateTimeColumn>
                                <telerik:GridTemplateColumn DataField="Priority" HeaderText="Priority" HeaderStyle-Width="200px">
                                    <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='<%# IIf(TypeOf 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>

Find Assistance

Help Us Improve

Was this example helpful?