PDA

View Full Version : [CLOSED] Calendar Sync / CRUD



ebeker
Oct 06, 2014, 5:59 PM
After couple of hours i was able to retrieve the calendar with my own data from database, now i am little bit lost about how to insert/update/delete my data.

Basically i need to catch somewhere in code behind the command name ("Update" or "Delete" or "Save") and the data that has been entered. Thank you in advance.

I already tried the AutoSync with giving update paramaters to my sql datasource but no luck.


Below is my main.aspx , main code behind and EventViewer.ascx.vb


<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"
BodyCls="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"
Handler="CompanyX.record.saveAll" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>

<ext:CalendarPanel
ID="CalendarPanel1"
runat="server"
Region="Center"
ActiveIndex="2"
Border="false">
<CalendarStore ID="CalendarStore1" AutoSync="true" runat="server">

</CalendarStore>
<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="EventWindow1"
runat="server"
Hidden="true"
CalendarStoreID="CalendarStore1">
<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>
<asp:SqlDataSource ID="dtsCalendars" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultCon %>" SelectCommand="SELECT * FROM TB_CALENDARS"></asp:SqlDataSource>
<asp:SqlDataSource ID="dtsEvents" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultCon %>" SelectCommand="SELECT * FROM TB_CALENDAR_EVENTS"
UpdateCommand="UPDATE TB_CALENDAR_EVENTS SET EventTitle=@EventTitle where EventId=@EventId"
>
<UpdateParameters>
<asp:Parameter Name="@EventId" Type="Int16" DefaultValue="-1" />
<asp:Parameter Name="@EventTitle" Type="String" DefaultValue="-1" />
</UpdateParameters>



</asp:SqlDataSource>




-----------CODE BEHIND----------------------------------------------------




Public Sub Page_Init(sender As Object, e As EventArgs)
Me.CalendarPanel1.EventStore = New EventStore() With { _
.ID = "EventStore1" _
}
AddHandler Me.CalendarPanel1.EventStore.SubmitData, AddressOf EventStore_SubmitData

Me.CalendarPanel1.EventStore.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.');" & vbCr & vbLf & " this.commitChanges();" & vbCr & vbLf & " return false;"
End Sub

Public Sub EventStore_SubmitData(sender As Object, e As StoreSubmitDataEventArgs)
Dim events As List(Of EventModel) = e.[Object](Of EventModel)()
DirectCast(Me.Page.LoadControl("../Shared/Common/EventsViewer.ascx"), EventsViewer).Render(events)
End Sub

Public Sub Page_Load(sender As Object, e As EventArgs)
If Not Ext.Net.X.IsAjaxRequest Then
Me.CalendarPanel1.EventStore.Events.AddRange(myEve nts)



Dim store = DirectCast(Ext.Net.X.GetCtl("CalendarStore1"), Ext.Net.CalendarStore)
Dim cal As New Ext.Net.CalendarModel()

For Each ROWS As DataRow In Users.Get_UserCalendar("TEST", "TEST").Rows
cal = New Ext.Net.CalendarModel
cal.CalendarId = ROWS("CalendarId")
cal.Title = ROWS("CalendarName")
store.Calendars.Add(cal)

Next




store.DataBind()



End If
End Sub

<DirectMethod([Namespace]:="CompanyX")> _
Public Sub ShowMsg(msg As String)
Ext.Net.X.Msg.Notify("Message", msg).Show()
End Sub


Public ReadOnly Property myEvents() As EventModelCollection
Get
Connections.OpenConnection()


Dim now As DateTime = DateTime.Now.[Date]
Dim eModel As Ext.Net.EventModel
Dim EMC As New EventModelCollection()


Dim dview As System.Data.DataView = DirectCast(dtsEvents.[Select](DataSourceSelectArguments.Empty), System.Data.DataView)

For Each rows As DataRow In dview.Table.Rows
eModel = New EventModel
eModel.CalendarId = rows("CalendarId").ToString
eModel.EndDate = rows("EndDate").ToString
eModel.StartDate = rows("StarDate").ToString
eModel.Reminder = rows("Reminder").ToString
eModel.Title = rows("EventTitle").ToString
eModel.Url = rows("Url").ToString
eModel.IsAllDay = rows("IsAllDay").ToString
eModel.EventId = rows(0).ToString
EMC.Add(eModel)

Next

'Dim value As String = DirectCast(dview.Table.Rows(0)("YourColumnName"), [String])







Return EMC


End Get
End Property


EventViewer.ascx.vb



Public Partial Class EventsViewer
Inherits System.Web.UI.UserControl
Public Sub Render(events As List(Of EventModel))
Me.TheEventStore.DataSource = events
Me.Window1.Render()
End Sub

Public Function ToScript(events As List(Of EventModel)) As String
Me.TheEventStore.DataSource = events
Return Me.Window1.ToScript()
End Function
End Class


EVENTVIEWER.ASCX


<ext:Window
ID="Window1"
runat="server"
Title="Events"
Modal="true"
BodyStyle="background:#fff;"
CloseAction="Destroy"
Width="600"
Height="400"
Layout="Fit">
<Items>
<ext:DataView
ID="DataView1"
runat="server"
ItemSelector="div.event"
AutoScroll="true">
<Store>
<ext:Store ID="TheEventStore" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="EventId" />
<ext:ModelField Name="CalendarId" />
<ext:ModelField Name="Title" />
<ext:ModelField Name="StartDate" Type="Date" />
<ext:ModelField Name="EndDate" Type="Date" />
<ext:ModelField Name="Location" />
<ext:ModelField Name="Notes" />
<ext:ModelField Name="Url" />
<ext:ModelField Name="IsAllDay" />
<ext:ModelField Name="Reminder" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl ID="Tpl1" runat="server">
<Html>
<tpl for=".">
<div class="event">
<table>
<caption>{Title} ({CalendarId}-{EventId})</caption>
<tr>
<th>Start Date</th>
<td>{StartDate:date("Y-m-d H:i:s")}</td>
</tr>
<tr>
<th>End Date</th>
<td>{EndDate:date("Y-m-d H:i:s")}</td>
</tr>
<tr>
<th>Location</th>
<td>{Location}</td>
</tr>
<tr>
<th>Notes</th>
<td>{Notes}</td>
</tr>
<tr>
<th>Url</th>
<td>{Url}</td>
</tr>
<tr>
<th>IsAllDay</th>
<td>{IsAllDay}</td>
</tr>
<tr>
<th>Reminder</th>
<td>{Reminder}</td>
</tr>
</table>
</div>
</tpl>
</Html>
</Tpl>
</ext:DataView>
</Items>
</ext:Window>

Daniil
Oct 07, 2014, 5:55 AM
Hi @ebeker,

A Calendar's EventStore is an inheritor of the Store class. So, using the regular save (sync) mechanism is a way to go. You can review the GridPanel saving examples on the Examples Explorer:
http://examples2.ext.net/

ebeker
Oct 08, 2014, 4:59 PM
It did not work spent nearly 20 hours with dealing EventStore but did not work so i found alternative ways. This is where am i at right now;

I am pulling up all my calendars and Events From Sql Database (No Problem At All) i do that in the codebehind.
I can add , delete , update any events on the calendar control without updating database. When click on Submit All Events Button it fires the fallowing code block, on that codeblock in the event list i can find the "New Added Events", "Updated Events" but it does not bring the ones just removed.That causes so many problems if i want to update my db. Because i do not know which events are not removed. Only scenario that i can think is remove all the events and insert again but it s even worse problem...... i really need help at this point. In the event models list i need to find out what EventIds are deleted.....


Public Sub EventStore_SubmitData(sender As Object, e As StoreSubmitDataEventArgs)
Dim events As List(Of EventModel) = e.[Object](Of EventModel)()

End Sub

Daniil
Oct 10, 2014, 11:33 AM
I think you need a Store's getChangedData method.

It is used here:
http://examples2.ext.net/#/GridPanel/Update/Batch/

The most interesting points for you are:

<ext:Parameter Name="data" Value="#{Store1}.getChangedData()" Mode="Raw" Encode="true" />
and

ChangeRecords<TestPerson> persons = new StoreDataHandler(e.ExtraParams["data"]).BatchObjectData<TestPerson>();

ebeker
Oct 13, 2014, 6:00 PM
i thought there would be a easier way , in the example that you gave basically , it s comparing the current grid's data with the first loaded data list and deleting the item(s) that does not exists in the first loaded data list.That s exactly how i solved my problem but i was in need a better solution to be able to get rid of the FOR EACH loops.

Daniil
Oct 14, 2014, 1:45 PM
The you can send removed records as an extra parameter of a submit request.

Example

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

<script runat="server">
public class SomeEntity
{
public string Property1 { get; set; }
public string Property2 { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new SomeEntity { Property1 = "1", Property2 = "2" },
new SomeEntity { Property1 = "3", Property2 = "4" },
new SomeEntity { Property1 = "5", Property2 = "6" }
};
}
}

protected void Store1_SubmitData(object sender, StoreSubmitDataEventArgs e)
{
List<SomeEntity> existingRecords = e.Object<SomeEntity>();

List<SomeEntity> removedRecords = JSON.Deserialize<List<SomeEntity>>(e.Parameters["removed"]);

X.Msg.Alert("Submit", string.Format("Existing: {0}; Removed: {1}", existingRecords.Count, removedRecords.Count)).Show();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var submit = function () {
App.Store1.removeAt(0); // for the sake of testing

App.Store1.submitData({
params: {
removed: App.Store1.getChangedData().Deleted
}
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Store ID="Store1" runat="server" OnSubmitData="Store1_SubmitData">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:Button runat="server" Text="Submit the data including the removed records" Handler="submit" />
</form>
</body>
</html>