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

[Solved] TreeView and SignalR

2 Answers 186 Views

TreeView

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

Patrick asked on 21 Jan 2015, 02:41 PM

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!

[Solved] TreeView and SignalR

2 Answers, 1 is accepted