Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Display of calculated fields in treeview template

3 Answers 133 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 2
Iron
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>
08.    <script src="http://code.jquery.com/jquery-1.9.1.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

Sort by
0
Jack
Top achievements
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.
0
Jack
Top achievements
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
Atanas Korchev
Telerik team
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!
 
Tags
TreeView
Asked by
Jack
Top achievements
Rank 2
Iron
Answers by
Jack
Top achievements
Rank 2
Iron
Atanas Korchev
Telerik team
Share this question
or