Diagram limit shapes to 2

1 Answer 18 Views
Diagram
Cliff
Top achievements
Rank 1
Cliff asked on 25 Jun 2021, 06:52 PM

This code if pasted into a dojo works to build a diagram example.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/diagram/index">

    <title></title>
   <link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css" />

    <script src="//kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
  </head>
<body>
    <div id="example">
    <div id="diagram"></div>
    <script>
              var data = [{
level: 0,
ordCode: "Org1",
orgName: "Org1 Level 0",
parentOrg: "",          
items: [{
level: 1,
ordCode: "Org2A",
orgName: "Org2A  Level 1",
parentOrg: "Org1"                                                                                           
}, 
{
level: 1,
ordCode: "Org2B",
orgName: "Org2B Level 1",
parentorg: "Org1"
},
{
level: 1,
ordCode: "Org2C",
orgName: "Org2C Level 1",
parentOrg: "Org1",
items:
[
{
level: 2,
ordCode: "Org3A",
orgName: "Org3A  Level 2",
parentOrg: "Org2C"                                                                                         
}, 
{
level: 2,
ordCode: "Org3B",
orgName: "Org3B Level 2",
parentorg: "Org2C"
},
{
level: 2,
ordCode: "Org3C",
orgName: "Org3C Level 2",
parentOrg: "Org2C",
items:[]                                                                                
}, 
{
level: 2,
ordCode: "Org3D",
orgName: "Org3D Level 2",
parentOrg: "Org2C"                                                                                         
},                                                                             
]                                                                                              
}, 
{
level: 1,
ordCode: "Org2D",
orgName: "Org2D Level 1",
parentOrg: "Org1"                                                                                           
},                                                                             
          ]
        }];

        function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: "linear",
                        stops: [{
                            color: "green",
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: "green",
                            offset: 1,
                            opacity: 1
                        }]
                    }
                }
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.ordCode,
                x: 85,
                y: 20,
                fill: "#fff"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.orgName,
                x: 85,
                y: 40,
                fill: "#fff"
            }));



            return g;
        }

        function createDiagram() {
            $("#diagram").kendoDiagram({
                dataSource: new kendo.data.HierarchicalDataSource({
                    data: data,
                    schema: {
                        model: {
                            children: "items"
                        }
                    }
                }),
                layout: {
                    type: "layered"
                },
                shapeDefaults: {
                    visual: visualTemplate
                },
                connectionDefaults: {
                    stroke: {
                        color: "#979797",
                        width: 2
                    }
                }
            });

            var diagram = $("#diagram").getKendoDiagram();
            diagram.bringIntoView(diagram.shapes);
        }

        $(document).ready(createDiagram);
    </script>
</div>    

</body>
</html>

I would like to limit the number of shapes to a number (i.e. 2) per level. See attached image for example. 

 

            

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 30 Jun 2021, 10:56 AM

Hi, Cliff,

Thank you for the provided code snippet.

The diagram has several built-in layouts which you can use to arrange the shapes in a certain order.

You can find more information about the layout, layout type and layout subtype in the API documentation.

If you want to arrange the shapes in a custom way, you would have to change their X and Y coordinates manually.

I have prepared a dojo sample which demonstrates one way to move every 2 shapes downwards.

https://dojo.telerik.com/@gdenchev/EdaSAcol 

I've left comments in the code for additional information.

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
Cliff
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or