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

Kendo UI TipOver tree children not alining vertically

6 Answers 269 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Luigi
Top achievements
Rank 1
Luigi asked on 18 Oct 2017, 10:02 AM
orgchart.png

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.

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Oct 2017, 06:39 AM
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.
0
Luigi
Top achievements
Rank 1
answered on 23 Oct 2017, 09:02 AM

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

0
Luigi
Top achievements
Rank 1
answered on 23 Oct 2017, 09:27 AM

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.
0
Stefan
Telerik team
answered on 25 Oct 2017, 06:32 AM
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.
0
Luigi
Top achievements
Rank 1
answered on 25 Oct 2017, 08:11 AM

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
0
Tsvetina
Telerik team
answered on 27 Oct 2017, 07:53 AM
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 x and y 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.
Tags
TreeView
Asked by
Luigi
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Luigi
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or