Why is rendering so slow?

[Marc]

I'm diagramming some product structures with 50-100 parts (3 levels). Rendering is taking about a minute (sometimes longer) in IE11 and sometimes the page is dying. If I break, it's always in kendo.all.min.js.

 

Does this sound right? It seems slow...

 Attaching a picture of a typical diagram and my initial code. I'm using Kendo UI v2015.2.902

 

 

 

<div id="diagram" style="width: 100%; height: 800px;">

    @(Html.Kendo().Diagram()

          .Name("diagram")

          .DataSource(dataSource => dataSource

               .Read(read => read.Action("_GetParts", "Diagram", new { partId = Model.PartId, level = Model.Level }))

               .Model(m => m.Children("Children"))

          )

 

          .Editable(false)

          .Layout(l => l

            .Type(DiagramLayoutType.Tree)

            .Subtype(DiagramLayoutSubtype.Tipover)

            .HorizontalSeparation(10)

            .VerticalSeparation(10)

        )

        .ConnectionDefaults(cd => cd

            .Stroke(s => s

                .Color("#bbb")

                .Width(1)

            )

             

    .Editable(false)

          )

          .ShapeDefaults(sd => sd

              .Visual("visualTemplate")

          )

 

          .Events(e => e.Select("onClick"))

<script type ="text/javascript">
    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
        var dataItem = options.dataItem;
        var imageLink = "../../Content/images/cc/" + dataItem.CommCode + ".png";
        var lc = dataItem.Lifecycle;

        if (lc == null) {
            lc = "?";
        }

        if (dataItem.IsParentLevel) {


            g.append(new dataviz.diagram.Rectangle({
                width: 400,
                height: 50,
                stroke: {
                    width: 1,
                    color: "#000"
                },
                fill: {
                    color: "#efefef"
                }
            }));

            g.append(new dataviz.diagram.Image({
                source: imageLink,
                x: 10,
                y: 3,
                width: 16,
                height: 16
            }));



            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.PartNum,
                x: 32,
                y: 3,
                color: "#000",
                fontSize: "14"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.ItemDesc,
                x: 12,
                y: 28,
                color: "#000",
                fontSize: "9"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: lc,
                x: 300,
                y: 3,
                color: "#000",
                fontSize: "9"
            }));

            g.append(new dataviz.diagram.Rectangle({
                width: 4,
                height: 50,
                fill: dataItem.DiagramColor,
                stroke: {
                    width: 0
                }
            }));

        } else {
            g.append(new dataviz.diagram.Rectangle({
                width: 120,
                height: 36,
                stroke: {
                    width: 1,
                    color: "#000"
                },
                fill: {
                    color: "#efefef"
                }
            }));

            g.append(new dataviz.diagram.Image({
                source: imageLink,
                x: 10,
                y: 3,
                width: 16,
                height: 16
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.PartNum,
                x: 32,
                y: 3,
                color: "#000",
                fontSize: "10"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.ShortDesc,
                x: 10,
                y: 23,
                color: "#000",
                fontSize: "8"
            }));

            g.append(new dataviz.diagram.Rectangle({
                width: 3,
                height: 36,
                fill: dataItem.DiagramColor,
                stroke: {
                    width: 0
                }
            }));
        }
        return g;
    }
</script>

    )

</div>

[Marc]

If I roll kendo.min.js back to q3 2014 the rendering time is about 3 seconds (which is acceptable) but the connector lines don't look good (see first image).

 The connector lines look good with the latest kendo.min.js, but it take 45 seconds to render. Everything the else is exactly the same (code, json, etc).

Rolling back the kendo version isn't really an option. Please let me know if I need to look into another diagram option. 

 

 

 

[Daniel]

Hello Marc,

We had previously received reports about slow rendering and this is logged in our system for further investigation, but in the reported cases there were a lot more shapes and connections than in the described scenario. Could you provide sample data that we can test with or a runnable sample that replicates the issue? 

Regards,
Daniel
Telerik

 

 

[Marc]

Sorry I can't provide our data, but it's a nested json object with 25-30 primitive properties. At this point I'm looking at a different js library which seems very fast. But let me know if you have a fix in your next version.

[Daniel]

Hello again,

We will certainly be looking into the performance issue but there might be something else in the specific scenario. That is why asked for some sample data. It is not necessary to be the same data as in your project. Just some data that has the same structure as the data loaded in the diagram. If this is also not possible then I will follow-up here once we have had the change to look at the general performance issue.

Regards,
Daniel
Telerik

 

 

[Daniel]

Hello,

We have made quite a few improvements to the rendering and layout performance. Please try with the latest internal build.

Regards,
Daniel
Telerik

 

 

[imane]

Hi friends

Marc i want to ask you hwo to use method in controller for use organigramme please can give me idea thanks

[Stefan]

Hello, Imane,

Please share with us more details about the desired result.

This will help us to provide more insides and suggestion on how it can be achieved with the Kendo UI Diagram.

Please have in mind that this is more than two years old thread and Marc may not have access to the same project.

Regards,
Stefan
Progress Telerik