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.
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: MyNode40. }41. },42. fields: {43. id: {44. type: NUMBER,45. editable: false46. },47. name: {48. type: STRING,49. editable: false50. },51. icon: {52. type: STRING,53. editable: false54. },55. hash: {56. type: STRING,57. editable: false58. }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: MyNode85. }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
0
Jack
Top achievements
Rank 2
Iron
Rank 2
Iron
answered on 29 Aug 2014, 09:04 AM
This is also running at http://dojo.telerik.com/ULAhA. Hover the nodes to see the urls linked to in the bottom left corner of the browser viewport:
- First level nodes are linked to urls with a hash that contains the code of the function instead of the resulting value from executing the function.
- Children are linked to urls with an undefined hash.
- First level nodes are linked to urls with a hash that contains the code of the function instead of the resulting value from executing the function.
- Children are linked to urls with an undefined hash.
0
Jack
Top achievements
Rank 2
Iron
Rank 2
Iron
answered on 29 Aug 2014, 09:14 AM
In this simple example, a workaround to issue 2 could be to build full paths in the template, but we are not looking at a workaround to avoid using calculated fields: i.e. we need calculated fields in treeview templates.
0
Hi,
Since the calculated fields are functions you need to call them in the template:
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
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!