Why is rendering so slow?

6 posts, 0 answers
  1. Marc
    Marc avatar
    67 posts
    Member since:
    Jul 2010

    Posted 29 Sep 2015 Link to this post

    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>

  2. Marc
    Marc avatar
    67 posts
    Member since:
    Jul 2010

    Posted 01 Oct 2015 Link to this post

    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. 

     

     

     

  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 02 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Marc
    Marc avatar
    67 posts
    Member since:
    Jul 2010

    Posted 02 Oct 2015 in reply to Daniel Link to this post

    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.
  6. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 06 Oct 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 26 Oct 2015 Link to this post

    Hello,

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

    Regards,
    Daniel
    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