Databind does not work when creating an Calendar event

  1. #1

    Databind does not work when creating an Calendar event

    I'm trying to create a calendar event in codebehind in the direct event of a button and I can not get the data updated in the calendar

    My source code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebInmo.Exp.Amenities.Test.Default" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Calendar - Ext.NET Examples</title>
        <link rel="stylesheet" href="main.css" />
        <script src="common.js"></script>
    
        <style>
            .ext-color-4,
            .ext-ie .ext-color-4-ad,
            .ext-opera .ext-color-4-ad {
                color: #7F0000;
            }
    
                .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: #7F0000;
                }
    
            .ext-color-4-x .ext-cal-evb,
            .ext-color-4-x dl {
                border-color: #7C3939;
            }
    
        
        </style>
    </head>
    <body>
        <form runat="server">
    
            <ext:ResourceManager runat="server" Namespace="CompanyX" />
    
           
    
            <ext:Viewport runat="server" Layout="Border">
                <Items>
    
                        
                    <ext:Panel
                        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="Panel1"
                        runat="server"
                        Title="..."
                        Layout="Border"
                        Region="Center"
                        Cls="app-center">
                        <Items>
                            <ext:Panel
                                ID="DatePickPanel"
                                runat="server"
                                Width="179"
                                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 runat="server">
                                        <Items>
                                            <ext:Button ID="Button1" runat="server" Icon="Disconnect" StandOut="true" Text="Add Event" Scale="Large" Flex="1">
                                        <DirectEvents>
                                            <Click OnEvent="btnAddEvent2_click">
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
    
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:Panel>
    
                            <ext:CalendarPanel
                                ID="CalendarPanel1"
                                runat="server"
                                Region="Center"
                                ActiveIndex="2"
                                Border="false"
                                DayText="Dia"
                                MonthText="Mes"
                                WeekText="Semana"
                                ShowTodayText="false"
                                AutoDataBind="true"
                                ActiveItem="1"
                                ShowMonthView="false"
                                ShowWeekView="false">
                                
                                <EventStore ID="EventStore1" runat="server"  AutoDataBind="true">
                                    <Mappings>
                                        <ext:ModelField Name="CalendarId" Type="Int" />
                                        <ext:ModelField Name="EventId" Type="Int" />
                                        <ext:ModelField Name="IsAllDay" Type="Boolean" />
                                        <ext:ModelField Name="Location" Type="String" />
                                        <ext:ModelField Name="Notes" Type="String" />
                                        <ext:ModelField Name="Reminder" Type="String" />
                                        <ext:ModelField Name="Title" Type="String" />
                                        <ext:ModelField Name="Url" Type="String" />
                                        <ext:ModelField Name="StartDate" Type="Date" />
                                        <ext:ModelField Name="EndDate" Type="Date" />
                                    </Mappings>
                                    <Listeners>
                                        <BeforeSync Handler="this.commitChanges(); return false;" />
                                    </Listeners>
                                </EventStore>
    
                                <CalendarStore ID="CalendarStore1" runat="server">
    
                                    <Calendars>
                                        <ext:CalendarModel CalendarId="1" Title="Cal 1" />
                                        <ext:CalendarModel CalendarId="2" Title="Cal 2" />
                                        <ext:CalendarModel CalendarId="3" Title="Cal 3" />
                                        <ext:CalendarModel CalendarId="4" Title="Cal 4" />
                                    </Calendars>
                                </CalendarStore>
                                <%-- Setting enableFx to false is a workaround for #833 --%>
                                <MonthView
                                    runat="server"
                                    ShowHeader="true"
                                    ShowWeekLinks="true"
                                    ShowWeekNumbers="true"
                                    EnableFx="false" />
                                <WeekView runat="server">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="enableFx" Value="false" Mode="Raw" />
                                    </CustomConfig>
                                </WeekView>
                                <DayView runat="server">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="enableFx" Value="false" Mode="Raw" />
                                    </CustomConfig>
                                </DayView>
    
                                <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"
                Title="mi titulo">             
                <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>
    My codebehind
           protected void Page_Load(object sender, EventArgs e)
            {
                /*EventStore eventStore = new EventStore { ID = "EventStore1" };
                EventModel myEvent = new EventModel { Title = "Evento Inicial", StartDate = DateTime.Now, EndDate = DateTime.Now.AddHours(1) };
                eventStore.Events.Add(myEvent);
                this.CalendarPanel1.EventStore = eventStore;
                */
                if (!X.IsAjaxRequest)
                {
                    EventStore eventStore = (EventStore)this.CalendarPanel1.EventStore;
                    EventModel myEvent = new EventModel();
                    myEvent.Title = "Event 1";
                    myEvent.CalendarId = 1;
                    myEvent.StartDate = DateTime.Now.AddHours(1);
                    myEvent.EndDate = DateTime.Now.AddHours(2);
                    eventStore.Events.Add(myEvent);
                    eventStore.DataBind();
                }
            }
    
       protected void btnAddEvent2_click(object sender, DirectEventArgs e)
            {
                
               
    
               EventStore eventStore = (EventStore)this.CalendarPanel1.EventStore;
                    EventModel myEvent = new EventModel();
                    myEvent.Title = "Event 2";
                myEvent.CalendarId = 1;
                myEvent.StartDate = DateTime.Now.AddHours(3);
                    myEvent.EndDate = DateTime.Now.AddHours(4);
                    eventStore.Events.Add(myEvent);
                eventStore.DataBind();
            }
    Help Me Please!
  2. #2
    Hello @carichavalo, and welcome to Ext.NET forums!

    I can't be sure whether this is the actual issue you're having, but I see you are referring to the components at client-side as CompanyX alone. This is at least ambiguous.

    When reference CompanyX.record, what is it you're expecting to reach? A store's record? Maybe the store you defined after CalendarStore1?

    If that's the case, the correct way to get down to a record of it would be CompanyX.CalendarStore1.getAt(0).data.

    But in the other hand, you're probably wanting to handle the record that triggered that event, like, a local variable. Then, say, in your line 173 of the ASPX code, you should use something like:

    <EventAdd Fn="record.addFromEventDetailsForm" />
    Notice I also dropped the Scope= argument, I am not really sure why you even need that in your case.

    How do I know this record variable should be available in that context? An easy way to query any component's event parameters is just by checking this tool in the examples explorer: Events - Listeners Arguments.

    Other way includes consulting the upstream documentation Generally abundant when it is a component from Ext JS -- which is not the case of the Calendar Panel. Yet another way, just adding web browser's breakpoints (using browser developer tools) or debugger; calls to wherever you want to probe, then inspect the available resources in that point of the code at run-time.

    While I don't think this is the main reason you can't have your whole code to work, this is indeed something you need to figure out before you can proceed or even solve the scenario you want to explore. Without this part working I can't even get to the point to verify data binding given your code sample.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Aug 05, 2017, 9:59 PM
  2. [CLOSED] Event after store DataBind
    By xeo4.it in forum 1.x Premium Help
    Replies: 2
    Last Post: May 06, 2011, 9:35 AM
  3. Stroe DataBind With IList<Hashtable> not work well
    By nanlinfeixue in forum 1.x Help
    Replies: 3
    Last Post: May 06, 2011, 7:47 AM
  4. Replies: 9
    Last Post: Apr 12, 2011, 4:13 PM
  5. Problem on creating event on user control
    By joao.msdn in forum 1.x Help
    Replies: 0
    Last Post: Jan 13, 2011, 3:41 PM

Posting Permissions