Gantt chart with signalR datasource

[Rami]

Hello, is it possible to use the gantt chart with a signalR datasource in either Asp.NET MVC or Core? I can't seem to find any demos/examples of it and my attempts are not succesful.

Below is my Gantt.cshtml:

@using KendoNetCoreTest.Models;
@using Kendo.Mvc.UI.Html;

<script src="@Url.Content("~/Scripts/jquery.signalR-2.2.2.min.js")"></script>
<script src="@Url.Content("~/signalr/hubs")"></script>

<script type="text/javascript">
    var hub = $.connection.ganttHub;
    var start = $.connection.hub.start();

    function pushEvent(e) {
        var notif = $("#notif").data("kendoNotification");
        notif.success(e.type);
    }
</script>

<div>
    @(Html.Kendo().Notification()
        .Name("notif")
        .Width("100%")
        .Position(p => p.Top(0).Left(0))
    )
</div>

<div>
    @(Html.Kendo().Gantt<GanttTask, GanttDependency>()
            .Name("gantSignalR")
            .Columns(cols => {
                cols.Bound(c => c.ID);
                cols.Bound(c => c.Title);
                cols.Bound(c => c.Start);
            })
            .DataSource(ds => ds
                .SignalR()
                .AutoSync(true)
                .Events(e => e.Push("pushEvent"))
                .Transport(tr => tr
                    .Promise("start")
                    .Hub("hub")
                    .Client(c => {
                        c.Read("read");
                        /*                      c.Create("create");
                                                c.Update("update");
                                                c.Destroy("destroy"); */
                    })
                    .Server(s => {
                        s.Read("read");
                        /*                      s.Create("create");
                                                s.Update("update");
                                                s.Destroy("destroy"); */
                    })
                )
                .Schema(sch => sch.Model(m => {
                    m.Id(f => f.ID);
                    m.Field(f => f.Title).DefaultValue("New task");
                    m.Field(f => f.Start).DefaultValue(DateTime.Now);
                    m.Field(f => f.End).DefaultValue(DateTime.Now.AddDays(2));
                    m.Field(f => f.Name).From("Name").DefaultValue("New task");
                    m.Field(f => f.ParentID).From("ParentID").DefaultValue(null);
                    m.Field(f => f.OrderId).From("OrderId");
                }))
            )
    )
</div>

<div>
    @(Html.Kendo().Grid<GanttTask>()
        .Name("grid")
        .Columns(cols => {
            cols.Bound(c => c.ID);
            cols.Bound(c => c.Title);
            cols.Bound(c => c.Start);
            cols.Bound(c => c.End);
            cols.Command(c => { c.Edit(); c.Destroy(); });
        })
        .DataSource(ds => ds
            .SignalR()
            .AutoSync(true)
            .Transport(tr => tr
                .Promise("start")
                .Hub("hub")
                .Client(c => {
                    c.Read("read");
                    c.Update("update");
                })
                .Server(s => {
                    s.Read("read");
                    s.Update("update");
                })
            )
            .Schema(sch => sch.Model(m => {
                m.Id(f => f.ID);
                m.Field(f => f.Title).DefaultValue("New task").Editable();
                m.Field(f => f.Start).DefaultValue(DateTime.Now).Editable();
                m.Field(f => f.End).DefaultValue(DateTime.Now.AddDays(2));
                m.Field(f => f.Name).DefaultValue("New task");
                m.Field(f => f.ParentID).DefaultValue(null);
                m.Field(f => f.OrderId);
            }))
        )
        .Editable(e => e.Mode(GridEditMode.InLine))
    )
</div>

 

The hub is currently just returning a dummy data of

public List<GanttTask> Read() {
            return new List<GanttTask>() {
                new GanttTask() { ID= 1, Title = "New task", Name= "New Task", Start = DateTime.Now, End=DateTime.Now.AddDays(2), OrderId = 1, ParentID = null }
            };
        }

 

The result is a bit mixed for the gantt. It show the ids but nothing else, while the grid shows everything ok, see attached picture. The grid meanwhile shows the dates also.

[Plamen]

Hi,

Unfortunately at the moment we don't have a ready sample with similar solution that is specially created for MVC Gantt. Yet it should work in a similar way as the scheduler widget in this demo. Here is a sample dojo where I replaced with scheduler with gantt and it was updating correctly with signalR.

Regards,
Plamen
Progress Telerik

[Rami]

Hello,

 

you steered me in the right direction. I see now that the reason nothing was showing up, was that the Gantt chart expects things to be named 'title' and 'start' and 'end' etc. but the signalR was serializing stuff as 'Title', 'Start', 'End', etc. just as they are named in the C# model. I got slightly around this by adjusting my schema configuration to:

m.Field<DateTime>("start").From("Start").DefaultValue(DateTime.Now);<br>                    m.Field<DateTime>("end").From("End").DefaultValue(DateTime.Now.AddDays(2));

 

etc. This made the tasks atleast show up, but everything fails again when I update from another tab (the dates go null). Also I noted that in the generated javascript I now have the fields twice, once from my own generation and the other time from autogeneration:

 

....
"schema":{
"model":{-- ,"Start":{"type":"date"},"End":{"type":"date"}, -- "start":{"type":"date","defaultValue":new Date(2017,9,6,13,54,25,439),"from":"Start"},"end":{"type":"date","defaultValue":new Date(2017,9,8,13,54,25,439),"from":"End"}}}},---

 

If you have any advice, I'd love to hear it.

[Plamen]

Hello,

It is not quite clear what is not working correctly without having a runnable code. In such case we would recommend isolating the issue in a sample application and sending it in a support ticket so we could inspect it locally and be more helpful.

Regards,
Plamen
Progress Telerik

[Rami]

Hello,

 

I think the problem might have been on my end with me using the same hub connection for two widgets (a gantt and a grid) on the same page. The problem seems to have resolved itself when moving things to different pages. If it reappears I'll post a sample.

 

Thank you for your time.