Bind KendoUI Grid to SignalR PersistentConnection

[Colin]

I'm having trouble binding the Grid to JSON data which is being delivered across a SignalR PersistentConnection with AngularJS. I'm not using hubs - effectively all that happens is a scope property is being updated, and I'd like the grid to update.

 

The relevant code that is called on update is:

/* ----- List of Sessions --------------- */
$rootScope.$on('Sessions', function (event, result) {
    $scope.$apply(function () {
        console.log(result);
        $scope.result = result;

    });
});

I want to bind the grid to $scope.result during the common lifetime of the grid and the connection. I've traced the code above and it's returning a repeating collection of JSON objects in a single parent object called 'data'. It looks like I'm missing something really simple, but I've been through lots of example code and still can't make it work.

 

Thank you

 

Colin Dixon

[Atanas Korchev]

Hi Colin,

Can you show us your grid declaration? How is the grid bound to the "result" scope variable?

The following should work:

<div kendo-grid k-data-source="result"></div>

$scope.result = new kendo.data.ObservableArray(result);

More info about using the Kendo Grid with arrays in Angular is available here.

Regards,
Atanas Korchev
Telerik

 

 

[Colin]

Hi Atanas

 

I figured it out! My code is:

 

function SignalRAngularCtrl($scope, signalRSvc, $rootScope) {


    $scope.cstatus = false;

    $scope.allowConnection = true;

    $scope.connection = null;

    $scope.message = null;

    $scope.pname = null;

    $scope.result = {};

    //  }

    /* --- DataSource for Session Information --- */
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: function (operation) {
                var data = operation.data.data || [];
                operation.success(data);
            }
        },

        schema: {
            model: {
                id: "SessionID",
                fields: {
                    SessionID: { type: "number" },
                    ServerID: { type: "string" },
                    VenueID: { type: "number" },
                    Start: { type: "string" },
                    Finish: { type: "date" },
                    NumberOfTeams: { type: "number" },
                    Title: { type: "string" },
                    WelcomeFileID: { type: "string" },
                    SessionType: { type: "string" },
                    NumberOfSubsNumberOfSubs: { type: "number" },
                    MaxParticipants: { type: "number" },
                    MaxPINAttempts: { type: "number" },
                    TimeZoneID: { type: "string" },
                    Venue: { type: "string" },
                    WelcomeFile: { type: "string" },
                    ParticipantSessions: { type: "string" },
                }
            }
        }
    });


    $scope.mainGridOptions = {
        dataSource: dataSource,
        selectable: "multiple row",
        height: 550,
        sortable: true,
        pageable: true,
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        change: function () {
        },
        columns: [
          /*  http://sympletech.com/kendo-ui-grid-multiselect-with-checkboxes/ */
             { field: "check_row", title: " ", width: 6, template: "<input class='check_row' type='checkbox' />" },
            {
                field: "SessionID",
                title: "SessionID",
                width: "16px"
            }, {
                field: "ServerID",
                title: "ServerID",
                width: "16px"
            }, {
                field: "Start",
                title: "Start",
                width: "30px"
            }
        , {
            field: "Title",
            title: "Title",
            width: "120px"
        }
        ]
    };


    $scope.connect = function () {
        signalRSvc.initialize();
    }

    $scope.disconnect = function () {
        alert("stop");
        $scope.connection.stop();
        alert("stop");
    }

    /* ----- Connection Status --------------- */
    $rootScope.$on('connected', function (event, result) {
        $scope.$apply(function () {
            console.log(result);
            $scope.cstatus = result;
            $scope.allowConnection = !result;
            $scope.connection = signalRSvc.connection;
            var f = new VClientCredentials("cfarley", 1, 91, 1, "blammo", 911, "OK");
            $scope.connection.send(f.sendMessage());

        });

        /* ----- List of Sessions --------------- */
        $rootScope.$on('Sessions', function (event, result) {
            $scope.$apply(function () {
                console.log(result);
                $scope.result = result;
                dataSource.read($scope.result);

            });
        });
    });

} /

I didn't know about ObservableArray(), but I'm happy to use the schema: attribute to define the model.

 

My only issue now is how to implement a context menu so the user can select an action to perform on the underlying data of a row. I have raised another ticket to this effect. After that, I'm set.

 

Regards.