Calendar demo
Source of:
Dragging.aspx
<script runat="server">
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
Sch.DragItemMode = (SchedulerItemDragMode)
Enum.Parse(typeof(SchedulerItemDragMode), DragItemModeList.Text);
Sch.ResizeBeginItemMode = (SchedulerItemResizeMode)
Enum.Parse(typeof(SchedulerItemResizeMode), ResizeItemBeginModeList.Text);
Sch.ResizeEndItemMode = (SchedulerItemResizeMode)
Enum.Parse(typeof(SchedulerItemResizeMode), ResizeItemEndModeList.Text);
if (ChangeLevelItemCheck.Checked)
Sch.BehaviorOptions |= SchedulerBehaviorOptions.AllowChangeLevelItem;
else
Sch.BehaviorOptions &= ~SchedulerBehaviorOptions.AllowChangeLevelItem;
if (DraggingOutsideCheck.Checked)
Sch.BehaviorOptions |= SchedulerBehaviorOptions.AllowDraggingOutside;
else
Sch.BehaviorOptions &= ~SchedulerBehaviorOptions.AllowDraggingOutside;
if (OverlapItemsCheck.Checked)
Sch.BehaviorOptions |= SchedulerBehaviorOptions.AllowOverlapItems;
else
Sch.BehaviorOptions &= ~SchedulerBehaviorOptions.AllowOverlapItems;
}
</script>
<script language="javascript" type="text/javascript">
function sch_Dragging(args) {
var chk = document.getElementById("<%=DontChangeTimeCheck.ClientID%>");
if (chk.checked) {
args.Valid = args.NewBegin.getTime()==args.OldBegin.getTime()
&& args.NewEnd.getTime()==args.OldEnd.getTime();
}
}
function body_MouseMove(e) {
var label = document.getElementById("TimeColumnLabel");
var pt = e.SenderPt();
var col = SchObj.GetColIndex(pt.X, true);
var row = SchObj.GetRowIndex(pt.Y, true);
label.innerHTML = "BODY:<br>Column="+col+" ("+SchObj.CalcDateTime(col)+")"+
",<br>Row=" + row + (row < 0 ? "" : " (" + SchObj.get_VisibleRows()[row].GetText(0) + ")");
}
function timeLine_MouseMove(e) {
var label = document.getElementById("TimeColumnLabel");
var pt = e.SenderPt();
var col = SchObj.GetColIndex(pt.X, true);
label.innerHTML = "TIME-LINE:<br>Column="+col+" ("+SchObj.CalcDateTime(col)+")";
}
function resHeader_MouseMove(e) {
var label = document.getElementById("TimeColumnLabel");
var pt = e.SenderPt();
var col = SchObj.GetResourceColIndex(pt.X, true);
label.innerHTML = "RESOURCE HEADER:<br>Column="+col+" ("+SchObj.get_Columns()[col].get_Text()+")";
}
function resList_MouseMove(e) {
var label = document.getElementById("TimeColumnLabel");
var pt = e.SenderPt();
var col = SchObj.GetResourceColIndex(pt.X, true);
var row = SchObj.GetRowIndex(pt.Y, true);
label.innerHTML = "RESOURCE LIST:<br>Column="+col+" ("+SchObj.get_Columns()[col].get_Text()+")"+
",<br>Row=" + row + (row < 0 ? "" : " (" + SchObj.get_VisibleRows()[row].GetText(0) + ")");
}
</script>
<table width="100%">
<tr>
<td valign="top" width="1">
<gos:Scheduler ID="Sch" runat="server" Height="325px" Width="601px" BackColor="Lavender"
Caption="Drag & drop operation configuration" Font-Names="Verdana" Font-Size="Small"
FreeDateColor="LightCoral" FreeTimeColor="LightSteelBlue" HorizontalHeaderLine="1px Black Solid"
HorizontalLine="1px SlateBlue Solid" VerticalLine0="2px SlateBlue Solid" VerticalLine1="1px SlateBlue Solid"
VerticalResourceLine="1px SlateBlue Solid" ObjectID="SchObj" ForeColor="Navy"
SplitterColor="0, 0, 192" VerticalLine2="1px LightSteelBlue Dotted" ResourcesWidth="150px"
LinkLine="1px RoyalBlue Solid"
BehaviorOptions="AllowOverlapItems, Default">
<Columns>
<gos:ResourceColumn Text="Caption">
</gos:ResourceColumn>
</Columns>
<BodyStyle BackColor="Lavender">
<EventMouseMove ClientScript="body_MouseMove(new GoEvent(event, this))" />
</BodyStyle>
<TimeLineStyle Font-Size="X-Small" ResourceImage="Blue">
<EventMouseMove ClientScript="timeLine_MouseMove(new GoEvent(event, this))" />
</TimeLineStyle>
<CaptionStyle HorizontalAlign="Center" ResourceImage="Blue" Font-Bold="True" Font-Size="X-Small" Border="1px Navy Solid">
</CaptionStyle>
<ResourceListStyle BackColor="AliceBlue">
<EventMouseMove ClientScript="resList_MouseMove(new GoEvent(event, this))" />
</ResourceListStyle>
<ResourceHeaderStyle BackColor="AliceBlue">
<EventMouseMove ClientScript="resHeader_MouseMove(new GoEvent(event, this))" />
</ResourceHeaderStyle>
<EventItemDragging ClientScript="sch_Dragging(args);" />
</gos:Scheduler>
</td>
<td valign="top">
DragItemMode:
<asp:DropDownList ID="DragItemModeList" runat="server" AutoPostBack="True">
<asp:ListItem>None</asp:ListItem>
<asp:ListItem Selected="True">OnlyMe</asp:ListItem>
<asp:ListItem>OnlyChangeRows</asp:ListItem>
<asp:ListItem>AllItems</asp:ListItem>
<asp:ListItem>Children</asp:ListItem>
<asp:ListItem>ChildrenIncrementOrder</asp:ListItem>
</asp:DropDownList><br />
<br />
ResizeItemBeginMode:
<asp:DropDownList ID="ResizeItemBeginModeList" runat="server" AutoPostBack="True">
<asp:ListItem>None</asp:ListItem>
<asp:ListItem Selected="True">OnlyMe</asp:ListItem>
<asp:ListItem>WithNeighbour</asp:ListItem>
<asp:ListItem>IncrementOrder</asp:ListItem>
<asp:ListItem>MoveNeighbours</asp:ListItem>
</asp:DropDownList><br />
<br />
ResizeItemEndMode:
<asp:DropDownList ID="ResizeItemEndModeList" runat="server" AutoPostBack="True">
<asp:ListItem>None</asp:ListItem>
<asp:ListItem Selected="True">OnlyMe</asp:ListItem>
<asp:ListItem>WithNeighbour</asp:ListItem>
<asp:ListItem>IncrementOrder</asp:ListItem>
<asp:ListItem>MoveNeighbours</asp:ListItem>
</asp:DropDownList><br />
<br />
Allows:<br />
<asp:CheckBox ID="ChangeLevelItemCheck" runat="server" AutoPostBack="True" Text="change level item" /><br />
<asp:CheckBox ID="DraggingOutsideCheck" runat="server" AutoPostBack="True" Checked="True"
Text="dragging outside" /><br />
<asp:CheckBox ID="OverlapItemsCheck" runat="server" AutoPostBack="True" Text="overlap items"
Checked="True" />
<br />
<br />
<asp:CheckBox ID="DontChangeTimeCheck" runat="server" Text="do not change time (javascript condition)" /><br />
<br />
Mouse position information:<br />
<span id="TimeColumnLabel">???</span></td>
</tr>
</table>
<span style="font-size: 8pt"><em>SchedulerItem</em> objects on a main grid can be moved
with a mouse. Dragging a left or right edge of a rectangle, you can change duration
of a <em>SchedulerItem</em>. These operations result in changing start and end times
and a <em>ResourceRow</em> objects a given <em>SchedulerItem</em> is assigned to.
A way this function works is determined by a <em>Scheduler.BehaviourOptions</em>
property. This is a property containing bit values (flags) representing deifferent
settings.
<br />
Turning a <em>SchedulerBehaviorOptions.AllowChangeLevelItem</em> flag off causes
moving a <em>SchedulerItem</em> object to a different level in a <em>ResourceRow</em>
objects tree impossible. E.i. a parent <em>ResourceRow</em> object a <em>SchedulerItem</em>
is assigned to cannot change. It can only be moved to neighbour resource objects
on the same level of a tree.<br />
Other setting of <em>SchedulerBehaviorOptions.AllowDraggingOutside</em> means that
it is possible to move <em>SchedulerItem</em> objects in such a way that a start
or end time will be outside a period of time currently visible on a control.
<br />
Switching a <em>SchedulerBehaviorOptions.AllowOverlapItems</em> flag off disallows
a <em>SchedulerItem</em> object to overlap other object. It means that two <em>SchedulerItem</em>
objects in the same resource cannot overlap.<br />
A control enables linking <em>SchedulerItem</em> objects. An item object can then
point to next item objects. A relation is visualised by an arrow. drag &drop
operations affect linked objects also in a way determined by a <em>Scheduler</em>
object properties. A <em>Scheduler.DragItemMode</em> property determines how linked
objects are to be modified when an object is moved. It is possible to move only
an object being changed (other are not moved) or other objects can be moved simultaneously
(only when a resource is not changed). There is also a setting moving all child
objects and not moving parent objects. There is also a setting disallowing moving
an object before the end of previous objects.<br />
<em>ResizeItemBeginMode</em> property determines a way previous objects are to be
changed when only a start time is changed and a <em>ResizeItemEndMode</em> property
a way subsequent objects are to be changed after an end date is changed. Settings
allow to move linked objects as a whole without changing duration or moving neighboring
objects appropriately. It is also possilbe to disallow changing linked objects.<br />
This page demonstrates all these settings. Changing fields on the right you can
cause a <strong>postback</strong> to be executed and <em>OnLoad</em> server method
to modify properties of a <em>Scheduler</em> object accordingly. It makes it easy
to check operation of a control with different settings.</span>