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

Display of calculated fields in treeview template

3 Answers 192 Views

TreeView

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

Jack asked on 29 Aug 2014, 08:55 AM

The following sample raises two issues which I struggle to sort out:

1) How to populate a HierarchicalDataSource and cast all items with a model derived from kendo.data.Node? In the following sample only nodes at the first level of the hierarchy (but none of the children) are cast; Accordingly calculated fields are undefined for all children.
2) How to display calculated fields in templates? In the following sample the function is actually printed in the resulting html by the template.

01.<!DOCTYPE html>

02.<html>

03.<head>

04. <meta charset="utf-8">

05. <title>Treeview</title>

06. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">

07. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">

08. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

09. <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>

10. <style>

11. .img-24 {

12. height: 24px;

13. width: 24px;

14. }

15. </style>

16.</head>

17.<body>

18.<ul data-role="treeview" data-bind="source:sample" data-template="my-template"></ul>

19.<script id="my-template" type="text/x-kendo-template">

20. <a href="#: item.hash$ #">

21. <img src="#: item.icon$ #" alt="#: item.name #" class="img-24">

22. <span>#: item.name #</span>

23. </a>

24.</script>

25.

26.<script>

27. /**

28. * Rummage model (displayed in treeview on find page)

29. * @type {kendo.data.Model}

30. */

31. var STRING = 'string',

32. NUMBER = 'number',

33. MyNode = kendo.data.Node.define({

34. id: 'id',

35. hasChildren: true,

36. children: {

37. schema: {

38. data: 'items',

39. model: MyNode

40. }

41. },

42. fields: {

43. id: {

44. type: NUMBER,

45. editable: false

46. },

47. name: {

48. type: STRING,

49. editable: false

50. },

51. icon: {

52. type: STRING,

53. editable: false

54. },

55. hash: {

56. type: STRING,

57. editable: false

58. }

59. },

60. icon$: function() {

61. return 'http://localhost/images/' + this.get('icon');

62. },

63. hash$: function() {

64. return 'http://localhost/find#!' + encodeURIComponent(this.get('hash'));

65. }

66. });

67.

68.

69. window.viewModel = kendo.observable({

70. sample: new kendo.data.HierarchicalDataSource({

71. transport: {

72. read: function(options) {

73. options.success([

74. { id: 1, name: 'node 1', icon: '1.png', hash:'1', items: [

75. { id: 4, name: 'node 1.1', icon: '1.1.png', hash:'1.1' },

76. { id: 5, name: 'node 1.2', icon: '1.2.png', hash:'1.2' }

77. ] },

78. { id: 2, name: 'node 2', icon: '2.png', hash:'2' },

79. { id: 3, name: 'node 3', icon: '3.png', hash:'3' }

80. ]);

81. }

82. },

83. schema: {

84. model: MyNode

85. }

86. })

87. });

88.

89. $(document).ready(function() {

90. kendo.bind('body', window.viewModel);

91. });

92.

93.</script>

94.</body>

95.</html>

3 Answers, 1 is accepted

answered on 02 Sep 2014, 07:37 AM

Hi,

Since the calculated fields are functions you need to call them in the template:

<a href="#: item.hash$() #">

<img src="#: item.icon$() #" alt="#: item.name #" class="img-24">

<span>#: item.name #</span>

</a>

The child model can't be set because MyNode isn't defined at the time you are using it. You should set it after the define() call:

MyNode.prototype.children.schema.model = MyNode;

Here is an updated version of your dojo example: http://dojo.telerik.com/@korchev/EjEd

Regards,
Atanas Korchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!