Example E4292
Visible to All Users

ASP.NET Web Forms - How to drag a row from ASPxGridView to ASPxScheduler

This example demonstrates how to create an appointment in ASPxScheduler based on a row dragged from ASPxGridView.

Files to Review

More Examples

Example Code

Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="scripts/script.js"></script> <script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui-1.8.23.custom.min.js"></script> <style type="text/css"> .dropTargetActive { border: solid 5px red; } .dropTargetHover { border: solid 5px yellow; } </style> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td style="vertical-align: top"> <dx:ASPxGridView ID="ASPxGridView1" runat="server" DataSourceID="gridDS" AutoGenerateColumns="False" ClientInstanceName="grid" Width="100%" KeyFieldName="ID"> <Columns> <dx:GridViewDataTextColumn FieldName="ID" ReadOnly="True" Visible="False" VisibleIndex="0"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="TypeName" VisibleIndex="1"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="Name" VisibleIndex="2"> </dx:GridViewDataTextColumn> <dx:GridViewDataDateColumn FieldName="Date" VisibleIndex="3"> </dx:GridViewDataDateColumn> <dx:GridViewDataHyperLinkColumn Caption="Image" ReadOnly="True"> <Settings AllowSort="False"></Settings> <EditFormSettings Visible="False" /> <DataItemTemplate> <div class="draggable"> <a href="#" title="Image Viewer"> <img src="images/drag.jpg" alt="" /> </a> <input type="hidden" value='<%# Container.VisibleIndex %>' /> </div> </DataItemTemplate> </dx:GridViewDataHyperLinkColumn> <dx:GridViewDataTextColumn FieldName="TypeID" Visible="false"> </dx:GridViewDataTextColumn> </Columns> </dx:ASPxGridView> </td> <td> <dx:ASPxScheduler runat="server" ID="Scheduler" AppointmentDataSourceID="AppointmentDataSource" ClientInstanceName="scheduler" ResourceDataSourceID="ResourceDataSource" ActiveViewType="WorkWeek" Start="2011-04-06" Width="100%" OnAppointmentRowInserting="Scheduler_AppointmentRowInserting" OnAppointmentRowInserted="Scheduler_AppointmentRowInserted" OnAppointmentsInserted="Scheduler_AppointmentsInserted" OnHtmlTimeCellPrepared="Scheduler_HtmlTimeCellPrepared" OnCustomCallback="Scheduler_CustomCallback"> <ClientSideEvents /> <Views> <DayView> <VisibleTime Start="0:00" End="23:59" /> </DayView> <WorkWeekView> <VisibleTime Start="8:00" End="23:59" /> </WorkWeekView> <WeekView Enabled="False" /> <MonthView CompressWeekend="False" /> <TimelineView Enabled="False" /> </Views> <Storage EnableReminders="False"> <Appointments> <Mappings AppointmentId="ID" Type="EventType" Start="StartDate" End="EndDate" AllDay="AllDay" Subject="Subject" Location="Location" Description="Description" Status="Status" Label="Label" ResourceId="ResourceID" RecurrenceInfo="RecurrenceInfo" /> </Appointments> <Resources> <Mappings ResourceId="ID" Caption="Name" /> </Resources> </Storage> <OptionsBehavior RecurrentAppointmentEditAction="Ask" /> <BorderLeft BorderWidth="0" /> </dx:ASPxScheduler> </td> </tr> </table> <dx:ASPxGlobalEvents ID="ASPxGlobalEvents1" runat="server"> <ClientSideEvents ControlsInitialized="InitalizejQuery" EndCallback="InitalizejQuery" /> </dx:ASPxGlobalEvents> <asp:AccessDataSource ID="gridDS" runat="server" DataFile="~/App_Data/GridDB.mdb" SelectCommand="SELECT * FROM [Appointments]"></asp:AccessDataSource> <dx:ASPxHiddenField ID="hf" runat="server" ClientInstanceName="hf" SyncWithServer="true"> </dx:ASPxHiddenField> <asp:SqlDataSource ID="AppointmentDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:DataConnectionString %>" DeleteCommand="DELETE FROM [Appointments] WHERE [ID] = @ID" InsertCommand="INSERT INTO [Appointments] ([EventType], [StartDate], [EndDate], [AllDay], [Subject], [Location], [Description], [Status], [Label], [ResourceID], [RecurrenceInfo], [ReminderInfo], [ContactInfo]) VALUES (@EventType, @StartDate, @EndDate, @AllDay, @Subject, @Location, @Description, @Status, @Label, @ResourceID, @RecurrenceInfo, @ReminderInfo, @ContactInfo)" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Appointments]" UpdateCommand="UPDATE [Appointments] SET [EventType] = @EventType, [StartDate] = @StartDate, [EndDate] = @EndDate, [AllDay] = @AllDay, [Subject] = @Subject, [Location] = @Location, [Description] = @Description, [Status] = @Status, [Label] = @Label, [ResourceID] = @ResourceID, [RecurrenceInfo] = @RecurrenceInfo, [ReminderInfo] = @ReminderInfo, [ContactInfo] = @ContactInfo WHERE [ID] = @ID" OnInserted="SchedulingDataSource_Inserted"> <DeleteParameters> <asp:Parameter Name="ID" Type="Int32" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="EventType" Type="Int32" /> <asp:Parameter Name="StartDate" Type="DateTime" /> <asp:Parameter Name="EndDate" Type="DateTime" /> <asp:Parameter Name="AllDay" Type="Boolean" /> <asp:Parameter Name="Subject" Type="String" /> <asp:Parameter Name="Location" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Status" Type="Int32" /> <asp:Parameter Name="Label" Type="Int32" /> <asp:Parameter Name="ResourceID" Type="Int32" /> <asp:Parameter Name="RecurrenceInfo" Type="String" /> <asp:Parameter Name="ReminderInfo" Type="String" /> <asp:Parameter Name="ContactInfo" Type="String" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="EventType" Type="Int32" /> <asp:Parameter Name="StartDate" Type="DateTime" /> <asp:Parameter Name="EndDate" Type="DateTime" /> <asp:Parameter Name="AllDay" Type="Boolean" /> <asp:Parameter Name="Subject" Type="String" /> <asp:Parameter Name="Location" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Status" Type="Int32" /> <asp:Parameter Name="Label" Type="Int32" /> <asp:Parameter Name="ResourceID" Type="Int32" /> <asp:Parameter Name="RecurrenceInfo" Type="String" /> <asp:Parameter Name="ReminderInfo" Type="String" /> <asp:Parameter Name="ContactInfo" Type="String" /> <asp:Parameter Name="ID" Type="Int32" /> </UpdateParameters> </asp:SqlDataSource> <asp:SqlDataSource ID="ResourceDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:DataConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Resources]"> </asp:SqlDataSource> </div> </form> </body> </html>
Default.aspx.cs(vb)
C#
using System; using System.Web.UI.WebControls; using System.Data.SqlClient; using DevExpress.Web.ASPxScheduler; using DevExpress.XtraScheduler; using System.Web.UI; using DevExpress.Web.Internal; using System.Drawing; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } int lastInsertedAppointmentId; // DXCOMMENT: This handler is called when a datasource insert operation has been completed protected void SchedulingDataSource_Inserted(object sender, SqlDataSourceStatusEventArgs e) { // DXCOMMENT: This method saves the last inserted appointment's unique identifier SqlConnection connection = (SqlConnection)e.Command.Connection; using (SqlCommand cmd = new SqlCommand("SELECT IDENT_CURRENT('Appointments')", connection)) { this.lastInsertedAppointmentId = Convert.ToInt32(cmd.ExecuteScalar()); } } // DXCOMMENT: This handler is called before appointment data is posted to the datasource for insertion protected void Scheduler_AppointmentRowInserting(object sender, ASPxSchedulerDataInsertingEventArgs e) { // DXCOMMENT: This method removes the ID field from the row insert query e.NewValues.Remove("ID"); } // DXCOMMENT: This handler is called after a new record that contains appointment information has been inserted into the datasource protected void Scheduler_AppointmentRowInserted(object sender, ASPxSchedulerDataInsertedEventArgs e) { // DXCOMMENT: This method sets the value of the key field for the appointment's data record e.KeyFieldValue = this.lastInsertedAppointmentId; } // DXCOMMENT: This handler is called after appointments are added to the collection protected void Scheduler_AppointmentsInserted(object sender, PersistentObjectsEventArgs e) { // DXCOMMENT: This method sets unique identifiers for new appointments ((ASPxSchedulerStorage)sender).SetAppointmentId((Appointment)e.Objects[0], lastInsertedAppointmentId); } protected void AppointmentDataSource2_Inserting(object sender, SqlDataSourceCommandEventArgs e) { } protected void Scheduler_HtmlTimeCellPrepared(object handler, ASPxSchedulerTimeCellPreparedEventArgs e) { e.Cell.CssClass += " droppable"; } protected void Scheduler_CustomCallback(object sender, DevExpress.Web.CallbackEventArgsBase e) { string commandName = e.Parameter; if(commandName == "CreateAppointment") { Appointment apt = Scheduler.Storage.CreateAppointment(AppointmentType.Normal); DateTime startTime = Convert.ToDateTime(hf["intervalStart"]); DateTime endTime = Convert.ToDateTime(hf["intervalEnd"]); object[] rowValues = ASPxGridView1.GetRowValues(Convert.ToInt32(hf["row"]), new string[] { "ID", "TypeName", "Name", "TypeID" }) as object[]; apt.Subject = String.Format("{1} - {0}", rowValues[2], rowValues[1]); apt.Description = "Test description"; apt.ResourceId = rowValues[3]; apt.Start = startTime; apt.End = endTime; Scheduler.Storage.Appointments.Add(apt); } } }
scripts/script.js
JavaScript
var showEditForm = null; function InitalizejQuery(s, e) { $('.draggable').draggable({ helper: function (ev, ui) { return $(ev.target) .clone() .css("z-index", 100); } }); $('.droppable').droppable( { activeClass: "hover", hoverClass: "dropTargetHover", drop: function (ev, ui) { // make a clone of the dragged item var hitTestResult = scheduler.CalcHitTest(ev); var interval = scheduler.GetCellInterval(hitTestResult.cell); var clone = (ui.draggable).clone(); // get the row index: row = $(clone).find("input[type='hidden']").val(); hf.Set('row', row); hf.Set('intervalStart', interval.GetStart()); hf.Set('intervalEnd', interval.GetEnd()); scheduler.PerformCallback("CreateAppointment"); } } ); }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.