[CLOSED] CalendarPanel Remote Data

  1. #1

    [CLOSED] CalendarPanel Remote Data

    Hi,

    I have the following code to load the Events of the Calendar from the server side. For some reason, the events do not show on the calendar at all. Any help is appreciated.

    View:
    Html.X().CalendarPanel().Region(Region.Center).ActiveIndex(2).Border(false).CalendarStore(Html.X().CalendarStore().Calendars(calendars =>
                    {
                        calendars.Add(new CalendarModel() { CalendarId = 1, Title = "Home"});
                        calendars.Add(new CalendarModel() { CalendarId = 2, Title = "Work" });
                        calendars.Add(new CalendarModel() { CalendarId = 3, Title = "School" });
                    })).EventStore(Html.X().EventStore().Proxy(proxy => proxy.Add(Html.X().AjaxProxy().Url(Url.Action("GetEvents")).Json(true).Reader(reader => reader.Add(Html.X().JsonReader().Root("data"))))))
    Action:
    public JsonResult GetEvents()
            {
                var data = new EventModelCollection();
                
                data.Add(new EventModel()
                    {
                        EventId = 1001,
                        CalendarId = 1,
                        Title = "Vocation",
                        StartDate = DateTime.Now.AddDays(-20).AddHours(10),
                        EndDate = DateTime.Now.AddDays(-10).AddHours(15),
                        IsAllDay = false,
                        Notes = "Have Fun"
                    });
                data.Add(new EventModel()
                {
                    EventId = 1002,
                    CalendarId = 2,
                    Title = "Lunch with Matt",
                    StartDate = DateTime.Now.AddHours(11).AddMinutes(30),
                    EndDate = DateTime.Now.AddHours(13),
                    IsAllDay = false,
                    Location = "Chuy's!",
                    Url = "http://chuys.com",
                    Notes = "Order the queso",
                    Reminder = "15"
                });
                data.Add(new EventModel()
                {
                    EventId = 1003,
                    CalendarId = 3,
                    Title = "Project Due",
                    StartDate = DateTime.Now.AddHours(15),
                    EndDate = DateTime.Now.AddHours(15),
                    IsAllDay = false
                });
    
                return Json(data);
            }
    Last edited by Daniil; May 18, 2012 at 5:01 PM. Reason: [CLOSED]
  2. #2
    Are you sure that Root("data") is correct?
    As I know JsonResult returns data in 'result'
    Try this
    Root("result")
  3. #3
    Quote Originally Posted by Vladimir View Post
    Are you sure that Root("data") is correct?
    As I know JsonResult returns data in 'result'
    Try this
    Root("result")
    Still does not work, and here are some findings:

    first, there is a javascript error on the page:

    Uncaught TypeError: Cannot call method 'getTime' of null

    second, GetEvents is not invoked
  4. #4
    Please provide a test case
  5. #5
    1) create an empty ASP.NET MVC3 application (solution name is XNet), select Razor with the view engine

    2) download Ext.Net package from NuGet then update the references of Ext.Net, Ext.Net.Utilities, Newtonsoft.Json, Transfrom.Net to the latest version

    3) create a new controller under the "Controller" folder called HomeController.cs

    4) create an Index function in HomeController.cs :

            public ActionResult Index()
            {
                return View();
            }
    5) create a GetEvents() function in HomeController.cs as following:
    public JsonResult GetEvents()
            {
                var data = new EventModelCollection();
                
                data.Add(new EventModel()
                    {
                        EventId = 1001,
                        CalendarId = 1,
                        Title = "Vocation",
                        StartDate = DateTime.Now.AddDays(-20).AddHours(10),
                        EndDate = DateTime.Now.AddDays(-10).AddHours(15),
                        IsAllDay = false,
                        Notes = "Have Fun"
                    });
                data.Add(new EventModel()
                {
                    EventId = 1002,
                    CalendarId = 2,
                    Title = "Lunch with Matt",
                    StartDate = DateTime.Now.AddHours(11).AddMinutes(30),
                    EndDate = DateTime.Now.AddHours(13),
                    IsAllDay = false,
                    Location = "Chuy's!",
                    Url = "http://chuys.com",
                    Notes = "Order the queso",
                    Reminder = "15"
                });
                data.Add(new EventModel()
                {
                    EventId = 1003,
                    CalendarId = 3,
                    Title = "Project Due",
                    StartDate = DateTime.Now.AddHours(15),
                    EndDate = DateTime.Now.AddHours(15),
                    IsAllDay = false
                });
    
                return Json(data, JsonRequestBehavior.AllowGet);
            }
    6) create a view (index.csthml) in Views/Home like this:

    @using Ext.Net
    @using Ext.Net.MVC
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Cal</title>
    </head>
    <body>
    @Html.X().ResourceManager().Namespace("CompanyX")
    
    @Html.X().Viewport().Layout("Border").Items(items =>
    {
        items.Add(Html.X().Panel().Region(Region.North).Height(53).Border(false));
        items.Add(Html.X().Panel().Layout("Border").Region(Region.Center).Items(pitems =>
            {
                pitems.Add(Html.X().Panel().Width(176).Region(Region.West).Items(wpitems =>
                    {
                        wpitems.Add(Html.X().DatePicker().Listeners(listeners =>
                            {
                                listeners.Select.Fn = "CompanyX.setStartDate";
                                listeners.Select.Scope = "CompanyX";
                            }));
                    }).TopBar(tbar => tbar.Add(Html.X().Toolbar().Items(tbaritems =>
                        {
                            tbaritems.Add(Html.X().Button().Text("Save All Events").Icon(Icon.Disk));
                    }))));
                pitems.Add(Html.X().CalendarPanel().Region(Region.Center).ActiveIndex(2).Border(false).CalendarStore(Html.X().CalendarStore().Calendars(calendars =>
                    {
                        calendars.Add(new CalendarModel() { CalendarId = 1, Title = "Home"});
                        calendars.Add(new CalendarModel() { CalendarId = 2, Title = "Work" });
                        calendars.Add(new CalendarModel() { CalendarId = 3, Title = "School" });
                    })).EventStore(Html.X().EventStore().Proxy(proxy => proxy.Add(Html.X().AjaxProxy().Url(Url.Action("GetEvents")).Json(true).Reader(reader => reader.Add(Html.X().JsonReader().Root("data")))))));
            }));
    })
    </body>
    </html>
    7) Publish the website to local IIS (IIS 7)

    8) launch the application with this URL http://localhost/XNet
  6. #6
    Quote Originally Posted by T3rryChan View Post
    2) download Ext.Net package from NuGet then update the references of Ext.Net, Ext.Net.Utilities, Newtonsoft.Json, Transfrom.Net to the latest version
    Please clarify is the issue reproducible with the latest Ext.NET from SVN?
  7. #7
    Quote Originally Posted by Daniil View Post
    Please clarify is the issue reproducible with the latest Ext.NET from SVN?
    yes it is.
  8. #8
    Well, according to a GetEvents response you should:

    1. Remove JsonReader Root at all.

    2. Defined DateFormat to "M$" for StartDate and EndDate formats. So, please set up the following properties for the EventStore.

    Example
    .NoMappings(true)
    .Mappings(mappings => {
        mappings.Add(Html.X().ModelField()
            .Name("StartDate")
            .Type(ModelFieldType.Date)
            .DateFormat("M$")
        );
        mappings.Add(Html.X().ModelField()
            .Name("EndDate")
            .Type(ModelFieldType.Date)
            .DateFormat("M$")    
        );  
    })
    Though it appears to be not enough to get it working. We are investigating further.
    Last edited by Daniil; May 14, 2012 at 7:44 PM. Reason: Mistyped "EndData" has been replaced with "EndDate"
  9. #9
    Quote Originally Posted by Daniil View Post
    Well, according to a GetEvents response you should:

    1. Remove JsonReader Root at all.

    2. Defined DateFormat to "M$" for StartDate and EndDate formats. So, please set up the following properties for the EventStore.

    Example
    .NoMappings(true)
    .Mappings(mappings => {
        mappings.Add(Html.X().ModelField()
            .Name("StartDate")
            .Type(ModelFieldType.Date)
            .DateFormat("M$")
        );
        mappings.Add(Html.X().ModelField()
            .Name("EndData")
            .Type(ModelFieldType.Date)
            .DateFormat("M$")    
        );  
    })
    Though it appears to be not enough to get it working. We are investigating further.
    It still not working, but thanks for your reply.
  10. #10
    Hi,

    Fixed in SVN. Please update and retest
    Don't forget to apply Daniil's code (in Daniil's post there is mistype: "EndData" -> "EndDate")
    .NoMappings(true)
    .Mappings(mappings => {
        mappings.Add(Html.X().ModelField()
            .Name("StartDate")
            .Type(ModelFieldType.Date)
            .DateFormat("M$")
        );
        mappings.Add(Html.X().ModelField()
            .Name("EndDate")
            .Type(ModelFieldType.Date)
            .DateFormat("M$")    
        );  
    })

Similar Threads

  1. How to reload CalendarPanel Data of Code-Behind?
    By easypower in forum 1.x Help
    Replies: 0
    Last Post: Jun 11, 2012, 3:37 AM
  2. datecolumn don't work with remote data
    By PetrSnobelt in forum 1.x Help
    Replies: 6
    Last Post: Jun 08, 2011, 10:25 AM
  3. [CLOSED] Local Paging for Remote Data Issue
    By dnguyen in forum 1.x Legacy Premium Help
    Replies: 26
    Last Post: Apr 12, 2011, 12:50 AM
  4. How to dispaly the Data using calendarpanel
    By krishna in forum 1.x Help
    Replies: 1
    Last Post: Jan 11, 2011, 1:16 PM
  5. [CLOSED] [1.0] Gridview local data paging with remote data
    By BerndDA in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 15, 2010, 10:29 AM

Posting Permissions