SignalR with sorting, Create, Destroy or Update

[Larry]

I have a list view that has a SignalR datasource. I load the initial data fine and the sorting works properly on the timestamp. What I am trying to do, is update the list with either new items or an updated timestamp on an existing item using SignalR.

If I simply update a new item using the update method, I can see the timestamp change, but it stays in the same position. To work around this, I do a Destroy and then a Create. This works perfectly. The problem  I am having, is that when a new item is sent it doesn't get inserted in to the list. I don't see any Javascript errors and I see the proper SignalR communication using the browser developer tools.

[Larry]

I did some more checking. It appears that the create event always fires first. So when a new item is created, it is destroyed right after. The reason why it works with existing items is that the destroy method always seems to be matching on the first instance of the"record" in the datasource. There has to be a reliable way to handle something like updating/inserting sorted records for creating a monitoring dashboard.

[Boyan Dimitrov]

Hello Larry,

Could you please share some code or a dojo example which demonstrates your exact case? 

Regards,
Boyan Dimitrov
Telerik by Progress

 

 

[Larry]

Simple hub:

public class TestHub : Hub
{
    public void UpdateData()
    {
        var r = new Random();
        Clients.All.customerHit(new { Id = r.Next(1,5), HitTime = DateTime.Now });
    }

    public dynamic InitData()
    {
        var Now = DateTime.Now;
        return new[]
        {
            new { Id = 1, HitTime = Now.AddHours(-2) },
            new { Id = 2, HitTime = Now.AddMinutes(-2) },
            new { Id = 3, HitTime = Now.AddDays(-2) }
        };
    }
}

Razor Page:

<script src="~/signalr/hubs"></script>
<script>
    var testHub, hubStart, connection;

    $(function () {
        testHub = $.connection.testHub;
        testHub.client.customerHit = function (data) {
            $("#LastUpdate").text("Id: " + data.Id + " Time: " + kendo.toString(data.HitTime, "h:mm:ss"))
        };
        hubStart = $.connection.hub.start()
            .done(function () {
                $("#update").click(function () { testHub.server.updateData(); })
            });
    });
</script>

<button type="button" id="update">Update</button>

Update from SignalR: <span id="LastUpdate"></span>

<script type="text/x-kendo-tmpl" id="lvTemplate">
    <div>Id: #:Id#: #:kendo.toString(HitTime,'h:mm:ss')#</div>
</script>

@(Html.Kendo().ListView<dynamic>()
    .Name("lvTest")
    .TagName("lvTest")
    .ClientTemplateId("lvTemplate")
    .DataSource(dataSource => dataSource
        .SignalR()
        .ServerSorting(false)
        .Sort(s => s.Add("HitTime").Descending())
        .Schema(s => s.Model(m =>
        {
            m.Id("Id");
            m.Field("HitTime", typeof(DateTime));
        }))
        .Transport(tr => tr
            .Promise("hubStart")
            .Hub("testHub")
            .Client(c => c.Update("customerHit")) //Does not re-sort the list when an item is updated
            //.Client(c => c.Create("customerHit").Destroy("customerHit")) //Re-sorts the list but no new items can be added
            .Server(c => c.Read("initData"))
        )
    )
)

[Boyan Dimitrov]

Hello Larry,

Have you tried to use the refresh method of the Kendo UI Grid. This will render all table rows using the current data items. 

Regards,
Boyan Dimitrov
Telerik by Progress