Jul 05, 2012, 9:45 AM
[CLOSED] Customizing Edit Event Details Window of Calendar.
Hi,
We are using the Ext.Net 2.x in our MVC3 Application. We have successfully added and handled some custom fields in "Edit Event" window (Popup). But after researching from various threads we were unable to figure out that how can we add these custom fields to the "Edit Details" window (opened on second click).
Further more there is a issue in "Edit Details" window (opened on Second click) in EXT.Net examples as well(https://examples2.ext.net/#/Calendar...w/Remote_Data/). You can replicate this issue by opening the "Edit Detail" window (opened on second click) and try to delete an event. (Attached is the screen shot)
Following is our code please suggest us how can we achieve our requirement of adding the custom fields to the Edit Details window.
--------------------------------------------------------------- Our View.cshtml (Start) --------------------------------------------------------------------------------
------------------------------------------------------------------- common.js (Start) -----------------------------------------------------------------------
---------------------------------------------------------------- Controller-Actions (start) ------------------------------------------------------------------
We are using the Ext.Net 2.x in our MVC3 Application. We have successfully added and handled some custom fields in "Edit Event" window (Popup). But after researching from various threads we were unable to figure out that how can we add these custom fields to the "Edit Details" window (opened on second click).
Further more there is a issue in "Edit Details" window (opened on Second click) in EXT.Net examples as well(https://examples2.ext.net/#/Calendar...w/Remote_Data/). You can replicate this issue by opening the "Edit Detail" window (opened on second click) and try to delete an event. (Attached is the screen shot)
Following is our code please suggest us how can we achieve our requirement of adding the custom fields to the Edit Details window.
--------------------------------------------------------------- Our View.cshtml (Start) --------------------------------------------------------------------------------
@{
//Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
Layout = null;
}
<link rel="stylesheet" type="text/css" href="../../Content/CalendarThemes/resources/css/main.css" />
<script src="../../Scripts/CalendarScripts/Ext.Net.Calendar/common.js" type="text/javascript"></script>
@using Ext.Net.MVC;
@model System.Data.DataSet
@(Html.X().ResourceManager()
.ScriptMode(Ext.Net.ScriptMode.Debug)
.IDMode(IDMode.Parent)
.Namespace("Event")
)
@(Html.X().Viewport()
.Layout(LayoutType.Border)
.Items(vItems => vItems
.Add(
Html.X().Panel()
.Border(false)
.Region(Region.North))
.Add(
Html.X().Panel()
.ID("Panel1")
.ItemID("Panel1")
.Title("...")
.Layout(LayoutType.Border)
.Region(Region.Center)
.Items(pItems => pItems
.Add(Html.X().Panel()
.Region(Region.West)
.Border(false)
.Add(
Html.X().DatePicker()
.ID("DatePicker1")
.ItemID("DatePicker1")
.Listeners(dpListner =>
{
dpListner.Select.Fn = "Event.setStartDate";
dpListner.Select.Scope = "Event";
})
)
)
)
.Add(
Html.X().CalendarPanel()
.ID("CalendarPanel1")
.ItemID("CalendarPanel1")
.Region(Region.Center)
.ActiveIndex(1)
.MonthView(
Html.X().MonthView()
.ShowHeader(true)
.ShowWeekLinks(true)
.ShowWeekNumbers(true))
.CalendarStore(
Html.X().CalendarStore()
.ID("CalendarStore1")
.ItemID("CalendarStore1")
.Calendars(delegate(CalendarModelCollection i)
{
i.Add(new CalendarModel { CalendarId = 1, Title = "Meeting" });
i.Add(new CalendarModel { CalendarId = 2, Title = "Appointment" });
i.Add(new CalendarModel { CalendarId = 3, Title = "Task" });
i.Add(new CalendarModel { CalendarId = 4, Title = "Event" });
i.Add(new CalendarModel { CalendarId = 5, Title = "Other" });
})
)
.EventStore(
Html.X().EventStore()
.ID("EventStore1")
.ItemID("EventStore1")
.NoMappings(true)
.DataSource(this.Model.Tables[0])
.Mappings(mapFields =>
{
mapFields.Add(Html.X().ModelField().Name("StartDate").Type(ModelFieldType.Date).Mapping("StartDate"));
mapFields.Add(Html.X().ModelField().Name("EndDate").Type(ModelFieldType.Date).Mapping("EndDate"));
mapFields.Add(Html.X().ModelField().Name("EventId").Type(ModelFieldType.Auto).Mapping("HOCode"));
mapFields.Add(Html.X().ModelField().Name("CalendarId").Type(ModelFieldType.Auto).Mapping("ActivityType"));
mapFields.Add(Html.X().ModelField().Name("Title").Type(ModelFieldType.Auto).Mapping("title"));
mapFields.Add(Html.X().ModelField().Name("Notes").Type(ModelFieldType.Auto).Mapping("body"));
mapFields.Add(Html.X().ModelField().Name("Attendees").Type(ModelFieldType.Auto));
}))
.Listeners( // Listeners
listners =>
{
listners.DayClick.Fn = "Event.dayClick"; listners.DayClick.Scope = "Event";
listners.RangeSelect.Fn = "Event.rangeSelect"; listners.RangeSelect.Scope = "Event";
listners.ViewChange.Fn = "Event.viewChange"; listners.ViewChange.Scope = "Event";
listners.EventMove.Fn = "Event.record.move"; listners.EventMove.Scope = "Event";
listners.EventClick.Fn = "Event.record.show"; listners.EventClick.Scope = "Event";
listners.EventResize.Fn = "Event.record.resize"; listners.EventResize.Scope = "Event";
listners.EventDelete.Fn = "Event.record.remove";
})
)
))
)
@(Html.X().EventWindow()
.ID("EventEditWindow1")
.ItemID("EventEditWindow1")
.CalendarStoreID("CalendarStore1")
.Hidden(true)
.Listeners(
listener =>
{
listener.EventAdd.Fn = "Event.record.add"; listener.EventAdd.Scope = "Event";
listener.EditDetails.Fn = "Event.record.edit"; listener.EditDetails.Scope = "Event";
listener.EventUpdate.Fn = "Event.record.update"; listener.EventUpdate.Scope = "Event";
listener.EventDelete.Fn = "Event.record.remove"; listener.EventDelete.Scope = "Event";
})
)
<style type="text/css">
.ext-color-4,
.ext-ie .ext-color-4-ad,
.ext-opera .ext-color-4-ad {
color: #717D7D;
}
.ext-cal-day-col .ext-color-4,
.ext-dd-drag-proxy .ext-color-4,
.ext-color-4-ad,
.ext-color-4-ad .ext-cal-evm,
.ext-color-4 .ext-cal-picker-icon,
.ext-color-4-x dl,
.ext-color-4-x .ext-cal-evb {
background: #717D7D;
}
.ext-color-4-x .ext-cal-evb,
.ext-color-4-x dl {
border-color: #7C3939;
}
.ext-color-5,
.ext-ie .ext-color-5-ad,
.ext-opera .ext-color-5-ad {
color: #B43104;
}
.ext-cal-day-col .ext-color-5,
.ext-dd-drag-proxy .ext-color-5,
.ext-color-5-ad,
.ext-color-5-ad .ext-cal-evm,
.ext-color-5 .ext-cal-picker-icon,
.ext-color-5-x dl,
.ext-color-5-x .ext-cal-evb {
background: #B43104;
}
.ext-color-5-x .ext-cal-evb,
.ext-color-5-x dl {
border-color: #7C3939;
}
</style>
------------------------------------------------------------------- View.cshtml (End) ------------------------------------------------------------------------------------------------------------------------------------------ common.js (Start) -----------------------------------------------------------------------
var sDate, eDate, aDate, record, confirmWindow;
var Event = {
getCalendar: function () {
return Event.CalendarPanel1;
},
getStore: function () {
return Event.EventStore1;
},
getWindow: function () {
return Event.EventEditWindow1;
},
viewChange: function (p, vw, dateInfo) {
var win = this.getWindow();
if (win) {
win.hide();
}
if (dateInfo !== "undefined" | dateInfo !== null) {
// Modifications
if (sDate == null | eDate == null) {
sDate = dateInfo.viewStart;
eDate = dateInfo.viewEnd;
aDate = dateInfo.activeDate;
this.DatePicker1.setValue(dateInfo.activeDate);
this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd);
}
else if (dateInfo == null | dateInfo == "undefined") { //
this.DatePicker1.setValue(aDate); // if dateInfo is undefined/null
this.updateTitle(sDate, eDate); //
}
else if (sDate != dateInfo.viewStart | eDate != dateInfo.viewEnd) { //
this.DatePicker1.setValue(dateInfo.activeDate); // if View change
this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd); //
}
// Modification End
}
},
updateTitle: function (startDt, endDt) {
var title = startDt.toDateString().substring(4, 10) + " - " + endDt.toDateString().substring(4, 10) + ", " + startDt.getFullYear();
this.Panel1.setTitle(title);
},
setStartDate: function (picker, date) {
this.getCalendar().setStartDate(date);
},
rangeSelect: function (cal, dates, callback) {
this.record.show(cal, dates);
this.getWindow().on('hide', callback, cal, { single: true });
},
dayClick: function (cal, dt, allDay, el) {
this.record.show.call(this, cal, {
StartDate: dt,
IsAllDay: allDay
}, el);
},
showResultText: function (btn) {
if (btn == "yes") {
var operationObj = {
TYPE: 'DELETE',
objdat: [
record.data.EventId
]
}
Ext.Ajax.request({
url: "../Calendar/CRUD",
cleanRequest: true,
params: operationObj,
success: function (result) {
Event.getStore().remove(record);
confirmWindow.hide();
Ext.Msg.notify("Event", '<b style="text-transform: uppercase">' + record.data.Title + '</b>' + " deleted");
},
error: function (result) {
Ext.Msg.alert("Error", "An error occurd while deleting data");
}
});
}
},
record: {
add: function (win, rec) {
var operationObj = {
TYPE: 'SAVE',
objdat: [
0,
rec.data.CalendarId,
rec.data.Title,
rec.data.StartDate,
rec.data.EndDate,
rec.data.IsAllDay,
rec.data.Notes,
rec.data.Url,
rec.data.Reminder,
rec.data.Location,
rec.data.IsNew,
rec.data.Attendees
]
}
win.hide();
rec.data.IsNew = true;
Ext.Ajax.request({
url: "../Calendar/CRUD",
cleanRequest: true,
params: operationObj,
success: function (result) {
rec.data.EventId = result.responseText;
Event.getStore().add(rec);
Event.ShowMsg('Event', '<b style="text-transform: uppercase">' + rec.data.Title + '</b>' + ' added');
},
error: function (result) {
Ext.Msg.alert("Error", "An error occurd while saving data");
}
});
},
update: function (win, rec) {
var operationObj = {
TYPE: 'UPDATE',
objdat: [
rec.data.EventId,
rec.data.CalendarId,
rec.data.Title,
rec.data.StartDate,
rec.data.EndDate,
rec.data.IsAllDay,
rec.data.Notes,
rec.data.Url,
rec.data.Reminder,
rec.data.Location,
rec.data.IsNew,
rec.data.Attendees
]
}
win.hide();
rec.commit();
Ext.Ajax.request({
url: "../Calendar/CRUD",
cleanRequest: true,
params: operationObj,
success: function (result) {
Event.ShowMsg('Event', '<b style="text-transform: uppercase">' + rec.data.Title + '</b>' + ' updated');
},
error: function (result) {
Ext.Msg.alert("Error", "An error occurd while updating data");
}
});
},
remove: function (win, rec) {
confirmWindow = win;
Ext.Msg.confirm("Delete Confirmation", "Are you sure you want to do delete " + rec.data.Title + "?", Event.showResultText);
record = rec;
},
edit: function (win, rec) {
win.hide();
Event.getCalendar().showEditForm(rec);
},
resize: function (cal, rec) {
var operationObj = {
TYPE: 'UPDATE',
objdat: [
rec.data.EventId,
rec.data.CalendarId,
rec.data.Title,
rec.data.StartDate,
rec.data.EndDate,
rec.data.IsAllDay,
rec.data.Notes,
rec.data.Url,
rec.data.Reminder,
rec.data.Location,
rec.data.IsNew,
rec.data.Attendees
]
}
Ext.Ajax.request({
url: "../Calendar/CRUD",
cleanRequest: true,
params: operationObj,
success: function (result) {
rec.commit();
Event.ShowMsg('Event', '<b style="text-transform: uppercase">' + rec.data.Title + '</b>' + ' time updated' + " from: " + '<b style="text-transform: uppercase">' + rec.data.StartDate.toLocaleTimeString() + '</b>' + " to: " + '<b style="text-transform: uppercase">' + rec.data.EndDate.toLocaleTimeString() + '</b>');
},
error: function (result) {
Ext.Msg.alert("Error", "An error occurd while updating data");
}
});
},
move: function (cal, rec) {
var operationObj = {
TYPE: 'UPDATE',
objdat: [
rec.data.EventId,
rec.data.CalendarId,
rec.data.Title,
rec.data.StartDate,
rec.data.EndDate,
rec.data.IsAllDay,
rec.data.Notes,
rec.data.Url,
rec.data.Reminder,
rec.data.Location,
rec.data.IsNew,
rec.data.Attendees
]
}
Ext.Ajax.request({
url: "../Calendar/CRUD",
cleanRequest: true,
params: operationObj,
success: function (result) {
rec.commit();
Event.ShowMsg('Event', '<b style="text-transform: uppercase">' + rec.data.Title + '</b>' + ' moved to ' + '<b style="text-transform: uppercase">' + rec.data.StartDate.toLocaleTimeString() + '</b>' + " at, " + '<b style="text-transform: uppercase">' + rec.data.StartDate.toDateString() + '</b>');
},
error: function (result) {
Ext.Msg.alert("Error", "An error occurd while updating data");
}
});
},
show: function (cal, rec, el) {
if (rec.data == "" | rec.data == null) {
Event.getWindow().show(rec, el);
}
else {
var operationObj = {
TYPE: 'READ',
objdat: [rec.data.EventId]
}
Ext.Ajax.request({
url: "../Calendar/CRUD",
cleanRequest: true,
params: operationObj,
success: function (result) {
rec.data.Attendees = result.responseText;
Event.getWindow().show(rec, el);
},
error: function (result) {
Ext.Msg.alert("Error", "An error occurd while getting event attendees");
}
});
}
},
saveAll: function () {
Event.getStore().submitData();
}
},
ShowMsg: function (EventTitle, record) {
Ext.Msg.notify(EventTitle, record.toString());
}
};
Ext.calendar.form.EventWindow.override({
constructor: function (config) {
var formPanelCfg = {
xtype: 'form',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 65
},
frame: false,
bodyStyle: 'background:transparent;padding:5px 10px 10px;',
bodyBorder: false,
border: false,
items: [
{
itemId: 'title',
name: Ext.calendar.data.EventMappings.Title.name,
fieldLabel: 'Title',
xtype: 'textfield',
anchor: '100%',
allowBlank: false
},
{
itemId: 'Description',
name: Ext.calendar.data.EventMappings.Notes.name,
fieldLabel: 'Description',
xtype: 'textarea',
anchor: '100%',
allowBlank: false
},
{
xtype: 'daterangefield',
itemId: 'date-range',
name: 'dates',
anchor: '100%',
fieldLabel: 'When'
}]
};
if (config.calendarStore) {
this.calendarStore = config.calendarStore;
delete config.calendarStore;
formPanelCfg.items.push
(
{
xtype: 'calendarpicker',
itemId: 'calendar',
name: Ext.calendar.data.EventMappings.CalendarId.name,
anchor: '100%',
store: this.calendarStore
},
{
itemId: 'Attendees',
id: 'Attendees',
name: Ext.calendar.data.EventMappings.Attendees.name,
fieldLabel: 'Attendees',
xtype: 'textfield',
anchor: '100%',
store: this.calendarStore
}
);
}
this.callParent([Ext.apply({
titleTextAdd: 'Add Event',
titleTextEdit: 'Edit Event',
width: 600,
autocreate: true,
border: true,
closeAction: 'hide',
modal: true,
resizable: false,
buttonAlign: 'left',
savingMessage: 'Saving changes...',
deletingMessage: 'Deleting event...',
layout: 'fit',
fbar: [{
xtype: 'tbtext',
text: '<a href="#" id="tblink" style="text-decoration:underline">Edit Details...</a>'
},
'->', {
text: 'Save',
disabled: false,
handler: this.onSave,
scope: this
},
{
itemId: 'delete-btn',
text: 'Delete',
disabled: false,
handler: this.onDelete,
scope: this,
hideMode: 'offsets'
},
{
text: 'Cancel',
disabled: false,
handler: this.onCancel,
scope: this
}],
items: formPanelCfg
},
config)]);
}
});
Ext.calendar.form.field.DateRange.override({
dateFormat: "Y-m-d"
});
------------------------------------------------------------------- common.js (End) --------------------------------------------------------------------------------------------------------------------------------------- Controller-Actions (start) ------------------------------------------------------------------
public ActionResult Index()
{
try
{ return View(FetchData()); }
catch (Exception)
{ return View(new DataSet { }); }
}
public string CRUD(List<object> objdat, string TYPE)
{
try
{
switch(TYPE)
{
// Update Operation //
// Delete Operation //
// Read Operation //
};
if (emailAddresses != null)
{
return emailAddresses;
}
else
{
return Convert.ToString(newID);
}
}
catch (Exception)
{ return "false"; }
}
---------------------------------------------------------------- Controller-Actions (End) ------------------------------------------------------------------
Last edited by Daniil; Jul 10, 2012 at 11:24 AM.
Reason: [CLOSED]