SignalR DataSource with ListView in AngularJS

[Dirk]

Hi,

I'm using the kendo dataSource (kendo.data.TreeListDataSource) for a treeList widget in an angularJS project.

Everytime I'm trying to update one of the items via inline editing I get the following error (in chrome). The error occurs when "other" clients are called via SignalR to update their data. Code on the server:

public ContactTreeListDto UpdateListItem(ContactTreeListDto item)
{
Clients.Others.UpdateListItem(item);
return item;
}

 

VM2835:3 Uncaught SyntaxError:
Unexpected number
extend.setter @ kendo.all.js:2018
Observable.extend._set @ kendo.all.js:4541
ObservableObject.extend.accept @ kendo.all.js:4734
Model.define.accept @ kendo.all.js:89185
DataSource.extend._createNewModel @ kendo.all.js:89252
Observable.extend.pushUpdate @ kendo.all.js:6187
Observable.extend._push @ kendo.all.js:6038
Observable.extend._pushUpdate @ kendo.all.js:6028
proxy @ jquery-2.2.1.js:492
hubProxy.fn.hubProxy.on.callbackMap.(anonymous function).(anonymous function) @ jquery.signalR-2.2.0.js:2611
jQuery.event.dispatch @ jquery-2.2.1.js:4732
elemData.handle @ jquery-2.2.1.js:4544
jQuery.extend.trigger @ jquery-2.2.1.js:7791
jQuery.fn.extend.triggerHandler @ jquery-2.2.1.js:7881
(anonymous function) @ jquery.signalR-2.2.0.js:2817
(anonymous function) @ jquery.signalR-2.2.0.js:791
jQuery.event.dispatch @ jquery-2.2.1.js:4732
elemData.handle @ jquery-2.2.1.js:4544
jQuery.extend.trigger @ jquery-2.2.1.js:7791
jQuery.fn.extend.triggerHandler @ jquery-2.2.1.js:7881
signalR.transports._logic.triggerReceived @ jquery.signalR-2.2.0.js:1490
(anonymous function) @ jquery.signalR-2.2.0.js:1511
jQuery.extend.each @ jquery-2.2.1.js:360
signalR.transports._logic.processMessages @ jquery.signalR-2.2.0.js:
1510(anonymous function) @ jquery.signalR-2.2.0.js:1933

Kendo version is  Kendo UI v2016.1.226

Here's the treeList configuration from controller:

(function() {
    'use strict';
    angular
        .module('XPhoneWeb')
        .controller('contactTreeListController', ['$scope', 'signalrService', 'notificationService', contactTreeListController]);

    function contactTreeListController($scope, signalrService, notificationService) {

        var vm = this;
        vm.reloadContactsCallback = function () {
            // auf Befehl des Servers alle Kontakte neu laden :-)
            notificationService.info("Kontaktliste wegen Änderung neu laden", "Nachricht vom Server");
            $scope.contactTreeList.dataSource.read();
        }
        vm.reload = function () {
            $scope.contactTreeList.dataSource.read();
        }
        vm.add = function (id) {

            alert('groupId: ' + id);

            var row = $("#contactTreeList").data("kendoTreeList")
              .tbody
              .find("tr[data-uid='" + id + "']");

            //$scope.contactTreeList.addRow($("#contactTreeList tbody>tr[data-uid='" + groupId + "']"));
            $scope.contactTreeList.addRow($(row));
        }

        initTreeList();

        registerEvents();

        function registerEvents() {

            // Event-Callback registrieren
            signalrService.on('contactTreeListHub', 'reloadContacts', vm.reloadContactsCallback);

            // Im Destroy-Event des Controllers die SignalR-Event Callback Methode wieder deregistrieren
            $scope.$on('$destroy', function () {
                signalrService.off('contactTreeListHub', 'reloadContacts', vm.reloadContactsCallback);
            });
        }

        // initialisiert die TreeList
        function initTreeList() {
            var hub = signalrService.getHubProxy('contactTreeListHub');
            var startPromise = signalrService.getStartPromise();

            vm.treelistOptions = {
                // DataSource Konfiguration
                dataSource: new kendo.data.TreeListDataSource ({
                    type: 'signalr',
                    autoSync: true,    // muss für POPUP Edit false sein, sonst werden 2 Update events gefeuert...
                    transport: {
                        signalr: {
                            promise: startPromise,
                            hub: hub,
                            server: {
                                read: 'readContactTreeList',
                                update: 'updateListItem',
                                destroy: 'deleteListItem',
                                create: 'addListItem'
                            },
                            client: {
                                read: 'readContactTreeList',
                                update: 'updateListItem',
                                destroy: 'deleteListItem',
                                create: 'addListItem'
                            }
                        }
                    },
                    schema: {
                        errors: "serverErrors",
                        model: {
                            id: "id",
                            parentId: "parentId",
                            fields: {
                                parentId: { type: "string", visible: false, nullable: true },
                                groupName: { type: "string", editable: true, nullable: true },
                                displayName: { type: "string", editable: true }
                                // TODO: Presence aufdröseln
                            }
                        }
                    },
                    error: function(e) {
                        notificationService.error(e.errors, "Nachricht vom Server");
                    },
                    push: function(e) {

                        alert('e.type: ' + e.type);
                        alert('e.items: ' + JSON.stringify(e.items));

                    }
                }),
                // TreeList Konfiguration
                sortable: false,
                editable: true,
                columns: [
                    {
                        field: 'displayName',
                        title: 'Name',
                        template: $('#contactTreeListItemTemplate').html(),
                    },
                    {
                        field: '',
                        title: '',
                        template: $('#contactTreeListItemAddTemplate').html(),
                    },
                    {
                        command: [
                            { name: 'edit' },
                            { name: 'destroy' }
                        ]
                    }
                ]
            };
        }
    }
})()

[Dirk]

Additional info:

DTO class on the server:

public class ContactTreeListDto //: SignalRTransportDto
    {
        public string id { get; set; }
        public string parentId { get; set; }
        public string GroupName { get; set; }
        public string DisplayName { get; set; }
    }

 

Any ideas?

Did I miss something?

 

Thanks in advance

Dirk

[Dirk]

Hi,

could you please modify the thread title from

"SignalR DataSource with ListView in AngularJS" to

"SignalR DataSource with TreeList in AngularJS"?

 

Dirk

[Rosen]

Hello Dirk,

We were able to identify the cause for the error you have described and to address it. The fix will be included in the official 2016 Q2 release of Kendo UI. Meanwhile, I have updated your telerik points as a token of gratitude for bringing this to our attention.

Regards,
Rosen
Telerik