Binding the Scheduler control to an existing API data source?

[Fernando]

I am relatively new to ASP.Net core (.net6) and I am trying to bind the Kendo scheduler with my existing data source.

Background: I am tasked with replacing outdated javascript tools for our "shipping scheduler", which is very similar to the Telerik Scheduler Timeline view.

Here is an example of what I am trying to achieve...

 

The data source is a simple API source from the web (for example https://mydomain.com/datasource), with the following structure:

 

namespace ShippingSchedulerApp.Models
{
    public class SchedulerEvent
    {
        public long ID { get; set; }
        public DateTime? start_date { get; set; }
        public DateTime? end_date { get; set; }
        public string? text { get; set; }
        public string? shipclass { get; set; }
        public decimal? beam { get; set; }
        public string? sectionID { get; set; }
        public string? flag { get; set; }
        public string? country { get; set; }
        public string? visitnumber { get; set; }
        public int? visitid { get; set; }
        public int? imo { get; set; }
        public string? details { get; set; }
        public string? cargo { get; set; }
        public decimal? duration { get; set; }
        public decimal? loa { get; set; }
        public string? stevedore { get; set; }
    }
}

If someone could point me to a demo or a sample way of connecting the above to the Telerik Scheduler Timeline view, that would be great.

Thanks

 

[Fernando]

Anyone can help please? The docs are very scant and thin. The API doc just says use .api   <-- what is that!? Desperate here. Thanks

[Stoyan]

Hello Fernando,

As a start I would recommend following our Getting Started with the Scheduler article which goes over the basic configuration of the component.

Here are some highlights:

• The SchedulerEvent must implement the ISchedulerEvent interface to be consumable by the Scheduler's DataSource.

  public class SchedulerModel : ISchedulerEvent
  {
     ...
  }

• The Json formatting of the request response needs to be in PascalCase for proper data binding.

I hope these insights are useful.

Please don't hesitate to let us know, if any further questions on the topic arise.

Regards,
Stoyan
Progress Telerik

[Fernando]

Thanks for that Stoyan. Yeah, that document helps a lot. I'll test out the json data in "Pascal" form soon and let you know how I went.

Just before I dig deeper, will it be able to reach the final design of the Scheduler to look like the image I've attached above? I need to remove the Hours column on the left and replace it with my own data. And is it possible to achieve the date/times shown in the image as well? I can live with the header and footers being default. Thanks again

[Stoyan]

Hi Fernando,

Yes, you can achieve look and feel a very similar to the one in the screenshot with the Scheduler's Timeline View. 

This view allows you to show the hours at the top and the available configured resources at the left.

For the Scheduler's Resources you can either set them up with Local Binding as shown in the related Demos:

  .Resources(resource =>
    {
        resource.Add(m => m.RoomID)
            .Title("Room")
            .Name("Rooms")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                    new { Text = "Meeting Room 101", Value = 1, Color = "#6eb3fa" },
                    new { Text = "Meeting Room 201", Value = 2, Color = "#f58a8a" }
            });
        resource.Add(m => m.Attendees)
            .Title("Attendees")
            .Name("Attendees")
            .Multiple(true)
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                    new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
                    new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
                    new { Text = "Charlie", Value = 3, Color = "#56ca85" }
            });
    })

or create a separate DataSource that provide the resource list as shown in the related forum thread here.

I hope the information above is useful.