Gantt chart with signalR datasource

5 posts, 0 answers
  1. Rami
    Rami avatar
    9 posts
    Member since:
    Sep 2017

    Posted 03 Oct Link to this post

    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.

  2. Plamen
    Admin
    Plamen avatar
    2821 posts

    Posted 05 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Rami
    Rami avatar
    9 posts
    Member since:
    Sep 2017

    Posted 06 Oct in reply to Plamen Link to this post

    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.

  4. Plamen
    Admin
    Plamen avatar
    2821 posts

    Posted 10 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Rami
    Rami avatar
    9 posts
    Member since:
    Sep 2017

    Posted 11 Oct in reply to Plamen Link to this post

    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.

Back to Top