This example demonstrates how to create an appointment in ASPxScheduler based on a row dragged from ASPxGridView.
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
- script.js (VB: script.js)
More Examples
Example Code
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>
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);
}
}
}
JavaScriptvar 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");
}
}
);
}