[CLOSED] Calendar Sync / CRUD

[ebeker]

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(myEvents)



            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]

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:
https://examples2.ext.net/

[ebeker]

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]

I think you need a Store's getChangedData method.

It is used here:
https://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]

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]

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>