PDA

View Full Version : [CLOSED] Insert, Update, Delete in CalendarPanel using ObjectDataSource



asiaesolutions
Feb 19, 2013, 8:44 AM
Hello, I 'm currently researching on CalendarPanel component. I can show the data on the calendar follow this example :
http://forums.ext.net/showthread.php?13914-calendarpanel-objectdatasource

Now, is it possible to use objectdatasource for insert, update, delete from code behind ? Can you give me an example for this ?

Thanks & Regards

Daniil
Feb 19, 2013, 10:46 AM
Hi @asiaesolutions,

Unfortunately, we have no such an example.

But I think it should work.

You can update the ObjectDataSource, then call the EventStore.DataBind(). The EventStore should update.

asiaesolutions
Feb 21, 2013, 9:20 AM
ok here i got an example .
On my ASPX page :


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Calendar_Demo.aspx.cs" Inherits="CRM_Templae.Calendar_Demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/common.js"></script>
<script src="js/override.js"></script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1"
runat="server"
Namespace="CompanyX"
/>

<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
<Items>
<ext:Panel ID="Panel1"
runat="server"
Height="35"
Border="false"
Region="North"
Cls="app-header"
BodyCssClass="app-header-content">
<Content>
<div id="app-logo">
<div class="logo-top">&nbsp;</div>
<div id="logo-body">&nbsp;</div>
<div class="logo-bottom">&nbsp;</div>
</div>
<h1>My Calendar</h1>
<span id="app-msg" class="x-hidden"></span>
</Content>
</ext:Panel>

<ext:Panel
ID="Panel2"
runat="server"
Title="..."
Layout="Border"
Region="Center"
Cls="app-center">
<Items>
<ext:Panel ID="Panel3"
runat="server"
Width="176"
Region="West"
Border="false"
Cls="app-west">
<Items>
<ext:DatePicker
ID="DatePicker1"
runat="server"
Cls="ext-cal-nav-picker">
<Listeners>
<Select Fn="CompanyX.setStartDate" Scope="CompanyX" />
</Listeners>
</ext:DatePicker>
</Items>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button
ID="Button1"
runat="server"
Text="Save All Events"
Icon="Disk"
OnClientClick="CompanyX.record.saveAll();"
/>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>

<ext:CalendarPanel
ID="CalendarPanel1"
runat="server"
Region="Center"
ActiveIndex="2"
Border="false">
<CalendarStore ID="GroupStore1" runat="server">
<Calendars>
<ext:CalendarModel CalendarId="1" Title="Home" />
<ext:CalendarModel CalendarId="2" Title="Work" />
<ext:CalendarModel CalendarId="3" Title="School" />
</Calendars>
</CalendarStore>
<EventStore ID="EventStore1" runat="server" NoMappings="true">
<Proxy>
<ext:AjaxProxy Url="../Shared/Code/RemoteService.asmx/GetEvents" Json="true">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="d" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Mappings>
<ext:ModelField Name="StartDate" Type="Date" DateFormat="M$" />
<ext:ModelField Name="EndDate" Type="Date" DateFormat="M$" />
</Mappings>
<Listeners>
<BeforeSync Handler="Ext.Msg.alert('Sync', 'The EventStore initiates a sync request after that action. The EventStore synchronization is not implemented in that example.');
this.commitChanges();
return false;" />
</Listeners>
</EventStore>
<MonthView ID="MonthView1"
runat="server"
ShowHeader="true"
ShowWeekLinks="true"
ShowWeekNumbers="true"
/>
<Listeners>
<ViewChange Fn="CompanyX.viewChange" Scope="CompanyX" />
<EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
<DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
<RangeSelect Fn="CompanyX.rangeSelect" Scope="CompanyX" />

<EventMove Fn="CompanyX.record.move" Scope="CompanyX" />
<EventResize Fn="CompanyX.record.resize" Scope="CompanyX" />

<EventAdd Fn="CompanyX.record.addFromEventDetailsForm" Scope="CompanyX" />
<EventUpdate Fn="CompanyX.record.updateFromEventDetailsForm" Scope="CompanyX" />
<EventDelete Fn="CompanyX.record.removeFromEventDetailsForm" Scope="CompanyX" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>

<ext:EventWindow
ID="EventEditWindow1"
runat="server"
Hidden="true"
CalendarStoreID="GroupStore1">
<Listeners>
<EventAdd Fn="CompanyX.record.add" Scope="CompanyX" />
<EventUpdate Fn="CompanyX.record.update" Scope="CompanyX" />
<EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
<EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />
</Listeners>
</ext:EventWindow>
</form>
</body>
</html>



here is my "override.js"


Ext.apply(CompanyX.record, {
saveAll: function () {
Ext.net.directRequest({
url: "../Shared/Code/RemoteService.asmx/SaveAll",
json: true,
cleanRequest: true,
extraParams: {
events: CompanyX.getStore().getRecordsValues()
}
});
}


});


this is my code behind :

[WebMethod]
public void Update(EventModel e)
{
DataClasses1DataContext dt = new DataClasses1DataContext();
var a = (from i in dt.Event_Tests
where i.EventID == e.EventId
select i).FirstOrDefault();
a.StartDate = e.StartDate;
a.EndDate = e.EndDate;
a.Title = e.Title;
a.Notes = e.Notes;
dt.SubmitChanges();
}

Now i want to pass an EventModel object as a paramerter to update from codebehind when I edit a calender event.
So how can i override the js file to do this ?

Daniil
Feb 21, 2013, 12:53 PM
The EventStore class is a descendant of the Store one. So, it inherits its saving functionality.

Please investigate the examples how to save using a Store. It makes sense for an EventStore as well.
http://examples2.ext.net/#/search/saving
http://examples2.ext.net/#/GridPanel/Update/SqlDataSource/
http://examples2.ext.net/#/GridPanel/Update/Batch/