Display of calculated fields in treeview template

4 posts, 0 answers
  1. Jack
    Jack avatar
    100 posts
    Member since:
    Jan 2007

    Posted 29 Aug 2014 Link to this post

    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>
  2. Jack
    Jack avatar
    100 posts
    Member since:
    Jan 2007

    Posted 29 Aug 2014 in reply to Jack Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Jack
    Jack avatar
    100 posts
    Member since:
    Jan 2007

    Posted 29 Aug 2014 in reply to Jack Link to this post

    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.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 Sep 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready