SignalR with sorting, Create, Destroy or Update

5 posts, 0 answers
  1. Larry
    Larry avatar
    4 posts
    Member since:
    Aug 2012

    Posted 23 Jul Link to this post

    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.

  2. Larry
    Larry avatar
    4 posts
    Member since:
    Aug 2012

    Posted 23 Jul in reply to Larry Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 27 Jul Link to this post

    Hello Larry,

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

    Regards,
    Boyan Dimitrov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  5. Larry
    Larry avatar
    4 posts
    Member since:
    Aug 2012

    Posted 27 Jul in reply to Boyan Dimitrov Link to this post

    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"))
            )
        )
    )

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Aug Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
Kendo UI is VS 2017 Ready