PDA

View Full Version : [CLOSED] CalendarPanel Remote Data



T3rryChan
May 11, 2012, 3:06 PM
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).Act iveIndex(2).Border(false).CalendarStore(Html.X().C alendarStore().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);
}

Vladimir
May 11, 2012, 3:24 PM
Are you sure that Root("data") is correct?
As I know JsonResult returns data in 'result'
Try this
Root("result")

T3rryChan
May 12, 2012, 7:35 AM
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

Vladimir
May 12, 2012, 8:28 AM
Please provide a test case

T3rryChan
May 12, 2012, 2:30 PM
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).He ight(53).Border(false));
items.Add(Html.X().Panel().Layout("Border").Region(Region.Center).Items(pitems =>
{
pitems.Add(Html.X().Panel().Width(176).Region(Regi on.West).Items(wpitems =>
{
wpitems.Add(Html.X().DatePicker().Listeners(listen ers =>
{
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

Daniil
May 14, 2012, 8:40 AM
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?

T3rryChan
May 14, 2012, 10:25 AM
Please clarify is the issue reproducible with the latest Ext.NET from SVN?

yes it is.

Daniil
May 14, 2012, 3:29 PM
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.

T3rryChan
May 14, 2012, 4:26 PM
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.

Vladimir
May 14, 2012, 5:03 PM
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$")
);
})