webapi databind not working (REST, not OData)

[Victor Perez]

I've spend a couple days on this to not avail. This is what I have:

On the view:

    @(Html.EJS()
          .Schedule("schedule")
          .EventSettings(es => es.DataSource(dataManger =>
          {
              dataManger.Url("/api/districts/" + Model.DistrictId + "/calendar")
                  .Adaptor("WebApiAdaptor");
          }))
          .StartHour("06:00")
          .EndHour("19:00")
          .Render()
          )

The webapi:

        [Route("districts/{districtId}/calendar")]
        public async Task<IHttpActionResult> GetDistrictAppointments(int districtId)
        {
            calendarManager.DistrictId = districtId;
            var calendarEvents = await calendarManager.GetDistrictAppointments(districtId);
            return Ok(calendarEvents.Select(x=>new
            {
                Id = x.EventId,
                x.Subject,
                x.StartTime,
                x.EndTime,
                AllDay = x.IsAllDay
            }));
        }

When I load the page, I can see the request to the api returning the following data:

[{
    "id": 1,
    "subject": "Test",
    "startTime": "2018-06-04T14:30:00",
    "endTime": null,
    "allDay": false
},
{
    "id": 2,
    "subject": "9AM",
    "startTime": "2018-06-05T14:00:00",
    "endTime": null,
    "allDay": false
},
... etc

]

However, the appointments don't show up on the schedule.

I would appreciate someone to point out how to get this working.

[Victor Perez]

Update: I figured it out, the webapi is returning the wrong field names since I'm using CamelCasePropertyNamesContractResolver

[Velmurugan S]

Hi Victor, 

Thanks for Contacting Syncfusion support. 

We are sorry for the delay and we have analyzed your mentioned scenario and this reported issue can be resolved by mapping the Schedule event settings fields within the ActionBegin event. Please refer to the following code example to map the fields with the Schedule control event settings fields. 

@(Html.EJS() 

              .Schedule("schedule") 

              .EventSettings(es => es.DataSource(dataManger => 

              { 

                  dataManger.Url("/api/districts/" + Model.DistrictId + "/calendar") 

                      .Adaptor("WebApiAdaptor"); 

              })) 

              .StartHour("06:00") 

              .EndHour("19:00") 

              .ActionBegin("onActionBegin") 

              .Render() 

) 

 

<script type="text/javascript"> 

    function onActionBegin() { 

        var scheduleObj = document.getElementById('schedule').ej2_instances[0]; 

        scheduleObj.eventSettings.fields = { 

            id: { name: 'id' }, 

            subject: { name: 'subject' }, 

            location: { name: 'location' }, 

            description: { name: 'description' }, 

            startTime: { name: 'startTime' }, 

            endTime: { name: 'endTime' }, 

            isAllDay: { name: 'isAllDay' }, 

            recurrenceID: { name: 'recurrenceID' }, 

            recurrenceRule: { name: 'recurrenceRule' }, 

            recurrenceException: { name: 'recurrenceException' } 

        }; 

    } 

</script> 

 

Also, we request you look into our below UG link to know about the JS2 Schedule control events. 

https://ej2.syncfusion.com/16.1.37/documentation/schedule/api-schedule.html?lang=typescript#events   

Kindly try with the above suggestion and let us know if you need any further assistance on this. 

Regards, 

Velmurugan