Kendo UI TipOver tree children not alining vertically

7 posts, 0 answers
  1. Luigi
    Luigi avatar
    4 posts
    Member since:
    Oct 2017

    Posted 18 Oct Link to this post

    I'm using Kendo UI to create an org chart, I have different levels, I need that every element that hasn't got a child aligns vertically.

    If you open the image you can see the output. I need that the fourth level in green becomes linked to the third level in red like the fifth level in red is linked with fourth level in red. How can I do that? It's really urgent, please help.

  2. Stefan
    Admin
    Stefan avatar
    1355 posts

    Posted 20 Oct Link to this post

    Hello, Luigi,

    Thank you for the image.

    Based on that I can assume that the desired result is to position the node 4 directly under the node 3:



    If this is correct, please provide more details how the node 5 is related to node 4, as the same type of relationship has to be set between node 3 and 4(green).

    I will be expecting the details and runnable example if possible, and I will gladly assist.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Luigi
    Luigi avatar
    4 posts
    Member since:
    Oct 2017

    Posted 23 Oct in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for your support; yes, you are correct, this is what I expect to have.
    The node 5 and node 4 have the same type of relation of node 3 and 4 (green), every element has an id and a parent id

    Example: node 5 has id: 5555-5555-5555555 and as parent id: 4444-4444-44444
    node 4 has id: 4444-4444-44444
    etc...
    node 1 has parent id: 00000-000

    I'm sorry but I can't give you a running example

    Best regards,
    Luigi

  4. Luigi
    Luigi avatar
    4 posts
    Member since:
    Oct 2017

    Posted 23 Oct in reply to Luigi Link to this post

    Sorry for double posting, but I made a similar example in this fiddle:

    http://dojo.telerik.com/UlAga
    replace the code with this:

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
         
     
    </head>
    <body>
    <div id="example">
         
        <div class="box wide">
            <div class="box-col">
                <h4>Layout: </h4>
                   <select id="subtype">
                        <option value="down">Tree Down</option>
                        <option value="up">Tree Up</option>
                        <option value="tipover">Tipover Tree</option>
                   </select>
            </div>
        </div>
         
        <div id="diagram"></div>
        <script>
            function createDiagram() {
                $("#diagram").kendoDiagram({
                    dataSource: {
                        data: diagramNodes(),
                        schema: {
                            model: {
                                children: "items"
                            }
                        }
                    },
                    layout: {
                        type: "tree",
                        subtype: "tipover",
                        horizontalSeparation: 30,
                        verticalSeparation: 20,
                      tipOverTreeStartLevel: 1
                    },
                    shapeDefaults: {
                        width: 40,
                        height: 40
                    }
                });
            }
     
            function diagramNodes() {
                var root = { name: "0", items: [] };
                addNodes(root, [3, 2, 3]);
              console.log([root]);
              var node = { name: "0", items: [] };
                        root.items.push(node);
                return [root];
            }
     
            function addNodes(root, levels) {
                if (levels.length > 0) {
                    for (var i = 0; i < levels[0]; i++) {
                      console.log(levels[0]);
                        var node = { name: "0", items: [] };
                        root.items.push(node);
     
                        addNodes(node, levels.slice(1));
                    }
                }
            }
     
            $(document).ready(function() {
                $("#subtype").change(function() {
                    $("#diagram").getKendoDiagram().layout({
                        subtype: "tipover",
                        type: "tree",
                        horizontalSeparation: 30,
                        verticalSeparation: 20
                    });
                });
            });
     
            $(document).ready(createDiagram);
            $(document).bind("kendo:skinChange", createDiagram);
        </script>
    </div>
     
     
    </body>
    </html>
    As you can see in the output, the first element has a child that has no child, I want to align that element vertically to the root element.
  5. Stefan
    Admin
    Stefan avatar
    1355 posts

    Posted 25 Oct Link to this post

    Hello, Luigi,

    Thank you for the example.

    Based on the current implementation of the Diagram the observed result is expected.

    The used tipOver layout will align all direct children horizontally and only the grand-children will be aligned vertically. This will set the same alignment for child row, and it currently does not allow placing some of the child nodes(on the same level) horizontally aligned and some of then vertically aligned.

    I can suggest all of our layout and sub layout options to check if there is another combination which will be better suited for the scenario:

    https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-layout.subtype 

    https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-layout.type

    Also, I can suggest submitting a feature request for a property which can be set to the individual nodes in order to set their preferred alignment. Then based on its popularity we may implement it in a future release:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/category/170307-diagram

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Luigi
    Luigi avatar
    4 posts
    Member since:
    Oct 2017

    Posted 25 Oct in reply to Stefan Link to this post

    Hi Stefan,
    Thanks for the support.

    I have just one more question, in the last example, if the fourth node (on the second level) had a child, it would be aligned vertically?
    Anyways, I checked every type and subtype but the only one matching what I need is the tipover, it would be perfect if it had the option to align element without a child vertically.

    Best regards,
    Luigi
  7. Tsvetina
    Admin
    Tsvetina avatar
    2106 posts

    Posted 27 Oct Link to this post

    Hello Luigi,

    Yes, the child would be positioned vertically, you can see the result by inserting one additional node:
    http://dojo.telerik.com/@tsveti/ozUgiL

    The layout algorithms are predefined and you cannot modify their behavior. As suggested by Stefan, you can add a feature request for a different algorithm in the feedback portal.

    If your Diagram is not very big and complex, you can hard-code the shapes positions, by specifying and values in the shapes dataSource. You can see all supported shapes binding options here:
    Shape Model Fields

    This Dojo shows a Diagram with hard-coded shapes positions: https://dojo.telerik.com/OMutIX/2

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top