SignalR DataSource with ListView in AngularJS

4 posts, 1 answers
  1. Dirk
    Dirk avatar
    25 posts
    Member since:
    Aug 2013

    Posted 25 Apr Link to this post

    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' }
                            ]
                        }
                    ]
                };
            }
        }
    })()

  2. Dirk
    Dirk avatar
    25 posts
    Member since:
    Aug 2013

    Posted 25 Apr in reply to Dirk Link to this post

    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

  3. Kendo UI is VS 2017 Ready
  4. Dirk
    Dirk avatar
    25 posts
    Member since:
    Aug 2013

    Posted 26 Apr in reply to Dirk Link to this post

    Hi,

    could you please modify the thread title from

    "SignalR DataSource with ListView in AngularJS" to

    "SignalR DataSource with TreeList in AngularJS"?

     

    Dirk

  5. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 28 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready