PDA

View Full Version : [CLOSED] CalendarPanel: How I lock moving and resize of Event slot?



supera
Apr 18, 2012, 6:36 PM
Hi!

I wish when the Event.CalendarId = 5, for example, the user donīt can moving and resizing the slot of event in the CalendarPanel (with the mouse, with drag and drop, directly in CalendarPanel). For others CalendarId, I wish that works normally.

Itīs possible?

Daniil
Apr 19, 2012, 2:21 PM
Hi,

I think it's possible, though I was unable to implement it for now.

As far as I can understand returning false from the beforeDragEnter function should prevent dragging, but it still happens in the example below.

I will investigate further.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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>Ext.NET v2 Example</title>

<script type="text/javascript">
var onMonthRender = function (view) {
view.dragZone.beforeDragEnter = function () {
return false;
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel runat="server">
<EventStore runat="server">
<Events>
<ext:EventModel
Title="My event"
StartDate="2012/4/15"
EndDate="2012/4/16"
CalendarId="1" />
</Events>
</EventStore>
<MonthView runat="server">
<Listeners>
<Render Fn="onMonthRender" Delay="1" />
</Listeners>
</MonthView>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

supera
Apr 19, 2012, 4:37 PM
Ok!

I'll be waiting.

Thanks a lot.

Daniil
Apr 20, 2012, 2:08 PM
Please update from SVN and try/investigate the following example.

You can use it as a start point.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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>Ext.NET v2 Example</title>

<script type="text/javascript">
var onMonthRender = function (view) {
view.dragZone.startDrag = function (x ,y) {
var enableDrag = true,
rec,
calendarId;

if (this.dragData.ddel) {
rec = this.view.getEventRecordFromEl(this.dragData.ddel) ;
calendarId = rec.data[Ext.calendar.data.EventMappings.CalendarId.name];

enableDrag = calendarId !== 2; // the condition to disable dragging
}

if (enableDrag) {
this.proxy.reset();
this.proxy.hidden = false;
this.dragging = true;
this.proxy.update("");
this.onInitDrag(x, y);
this.proxy.show();
} else {
Ext.fly(this.getDragEl()).hide();
this.moveOnly = true;
}
}

view.dragZone.onEndDrag = Ext.Function.createInterceptor(function () {
this.moveOnly = false;
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore runat="server">
<Events>
<ext:EventModel
EventId="1"
Title="Draggable"
StartDate="2012/4/15"
EndDate="2012/4/16"
CalendarId="1" />

<ext:EventModel
EventId="2"
Title="Not draggable"
StartDate="2012/4/25"
EndDate="2012/4/26"
CalendarId="2" />
</Events>
</EventStore>
<MonthView runat="server">
<Listeners>
<Render Fn="onMonthRender" Delay="1" />
</Listeners>
</MonthView>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

supera
Apr 23, 2012, 12:18 PM
Hi Daniil!

Your example works very well in month view... Thanks a lot.

I try implement this function to dayview and weekdayview too, but I get a error...
Appears that DayView and WeekdayView donīt have 'view.dragZone' property...

Daniil
Apr 23, 2012, 1:58 PM
As far as I can remember the Week and Day views consist from the two views - header and body. I think you should look a dragZone up on a body part.

supera
Apr 24, 2012, 11:20 AM
Hi Daniil!

I did it! Thanks a lot for your help!