TreeView and SignalR

3 posts, 0 answers
  1. Patrick
    Patrick avatar
    2 posts
    Member since:
    Oct 2014

    Posted 21 Jan 2015 Link to this post

    Hi!

    I would like to use SignalR as data source of a MVVM TreeView, so I took the Grid SignalR example and I tried to modify it but I couldn't get it to work.

    Here is what I got so far (app.js):

    01.var viewModel;
    02. 
    03.$(document).ready(function () {
    04. 
    05.    var hubUrl = "signalr/hubs";
    06.    var connection = $.hubConnection(hubUrl, {useDefaultPath: false});
    07.    var hub = connection.createHubProxy("eventHub");
    08.    var hubStart = connection.start({jsonp: true});
    09. 
    10.    viewModel = kendo.observable({
    11.        allEvents: new kendo.data.HierarchicalDataSource({
    12.            type: "signalr",
    13.            autoSync: true,
    14.            push: function (e) {
    15. 
    16.            },
    17.            schema: {
    18.                model: {
    19.                    id: "Id",
    20.                    fields: {
    21.                        "Id": {type: "number"},
    22.                        "Name": {type: "string"},
    23.                        "HasChildren": {type: "boolean"}
    24.                    },
    25.                    hasChildren: "HasChildren",
    26.                    children: "Children"
    27.                }
    28.            },
    29.            transport: {
    30.                signalr: {
    31.                    promise: hubStart,
    32.                    hub: hub,
    33.                    server: {
    34.                        read: "read",
    35.                        update: "update"
    36.                    }
    37.                }
    38.            }
    39.        })
    40.    });
    41. 
    42.    kendo.bind($("body"), viewModel);
    43. 
    44. 
    45.});

    The HTML is pretty simple:
    01.<body>
    02. 
    03.<div id="content">
    04. 
    05.    <div data-role="treeview"
    06.         data-text-field="Name"
    07.         data-bind="source: allEvents"></div>
    08. 
    09.</div>
    10. 
    11.<script type="text/javascript" src="app.js"></script>
    12. 
    13.</body>

    And this is my Hub:
    01.public class EventHub : Hub
    02.    {
    03.        public IEnumerable<Branch> Read()
    04.        {
    05.            return new List<Branch>
    06.            {
    07.                new Branch("Test branch 1", 1, new List<Branch> {new Branch("Test event 1", 2)}),
    08.                new Branch("Test branch 2", 3)
    09.            };
    10.        }
    11. 
    12.        public void Update(Branch branch)
    13.        {
    14.            Clients.Others.update(branch);
    15.        }
    16.    }
    17. 
    18.    public class Branch
    19.    {
    20.        public Branch()
    21.        {
    22.            Children = new List<Branch>();
    23.        }
    24. 
    25.        public Branch(string name, long id)
    26.            : this()
    27.        {
    28.            Name = name;
    29.            Id = id;
    30.        }
    31. 
    32.        public Branch(string name, long id, IEnumerable<Branch> children)
    33.            : this(name, id)
    34.        {
    35.            Children = children;
    36.        }
    37. 
    38.        public IEnumerable<Branch> Children { get; set; }
    39.        public string Name { get; set; }
    40.        public long Id { get; set; }
    41.        public Boolean HasChildren
    42.        {
    43.            get { return Children != null && Children.Any(); }
    44.        }
    45.    }

    The first level ("Test branch 1" and "Test branch 2") is shown, but as soon as I click on the expand arrow, I get a javascript error. I would be happy if you could tell me where the problem is here or - even better - post a full example of a TreeView in combination with SignalR.

    Thanks!
  2. Patrick
    Patrick avatar
    2 posts
    Member since:
    Oct 2014

    Posted 22 Jan 2015 in reply to Patrick Link to this post

    I just updated Kendo UI to build 1316 and it works now. However it would be great to see some more SignalR examples in the Kendo demos in the future.
  3. Kendo UI is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 22 Jan 2015 Link to this post

    Hello Patrick,

    Indeed, the TreeView support for pushUpdate was introduced in 2014.Q3.1316. Right now, there are no detailed SignalR examples, but we will consider adding such in the future.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top