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):
The HTML is pretty simple:
And this is my Hub:
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!
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 : Hub02. {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 Branch19. {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 HasChildren42. {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 Answers, 1 is accepted
0
Patrick
Top achievements
Rank 1
Rank 1
answered on 22 Jan 2015, 12:02 PM
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.
0
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!