SignalR Client not connecting when Grid added at runtime

[John]

I have a very simple grid that I am adding a runtime (e.g. user clicks a button to add this grid).  The OnConnected event of my hub never gets fired.  Interestingly when I move the same code to the $(document).ready(function() it works fine.  It appears the issue is with binding the client to the hub dynamically.

My code, the values of chat and hubStart are valid.

$('.controls').on('click', 'img', function (e) { 

  loadLiveEvents()

}

function loadLiveEvents() {    
    var connection = $.connection;
    var chat = connection.messageHub;
    // Start the connection.
    var hubStart = $.connection.hub.start().done(function() {});

    var dataSource = new kendo.data.DataSource({
        type: "signalr",
        autoSync: true,
        schema: {
            model: {
                id: "ID",
                fields: {
                    "ID": { type: "number" }
                }
            }
        },
        transport: {
            signalr: {
                promise: hubStart,
                hub: chat,
                server: {
                    read: "readbasic",
                    update: "sendToGrid",
                    create: "sendToGrid"
                },
                client: {
                    read: "readbasic",
                    update: "sendToGrid",
                    create: "sendToGrid"
                }
            }
        }
    });
    
    $("#myGrid").kendoGrid({
        columns: [
            { field: "ID" },
        ],
        dataSource: dataSource
    });
}



 

[John]

I should have added that the call to 'readbasic' works fine, the grid loads the initial data.  It is just the updates that are not received.

[John]

Also if I just use pure javascript and replace my loadLiveEvents method with the below code, I receive the updates correctly so it looks it something specific to the kendo Data source binding

 

function loadLiveEvents(hubStart1, chat1) {

    var chat = $.connection.messageHub;

    chat.client.sendToGrid = function(data) {
        alert("received message");
    };

    // Start the connection.
    $.connection.hub.start().done(function() {
    });
}

[Stefan]

Hello John,

I was not able to observe the same behaviour on my end.

I made a video demonstrating then even if the Grid is initialized on a later state on button click, the push notifications are received as expected:

https://www.screencast.com/t/107uMn7PNcA9

I used our demo example for reference and modify it to demonstrate this use case:

http://demos.telerik.com/kendo-ui/grid/signalr

http://dojo.telerik.com/UdevE

Please ensure that when the Grid is initialized on button click all of the needed configuration are available.

If additional assistance is needed, please provide a runnable example so I can investigate further.

Regards,
Stefan
Telerik by Progress