This is a migrated thread and some comments may be shown as answers.

Bind KendoUI Grid to SignalR PersistentConnection

2 Answers 42 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Colin
Top achievements
Rank 1
Colin asked on 05 Sep 2015, 07:27 PM

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

2 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 09 Sep 2015, 08:13 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Colin
Top achievements
Rank 1
answered on 10 Sep 2015, 07:57 PM

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: [
             { 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.

Tags
Grid
Asked by
Colin
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Colin
Top achievements
Rank 1
Share this question
or