"Preferred" height of Layout object?

2 posts, 0 answers
  1. Itai
    Itai avatar
    34 posts
    Member since:
    Feb 2016

    Posted 01 May 2016 Link to this post


    I'm using kendo.dataviz.diagram.Layout to handle text overflow in diagram shapes, but sometimes that is not enough, and the text overflows vertically. I want to identify this problem and solve it by changing my shape's height to fit this, so I need a way to ask the Layout what is it's preferred height (or number of lines, etc). 

    I currently have something like this: 


    var layout = new kendo.dataviz.diagram.Layout(
                        new kendo.dataviz.diagram.Rect(shape.contentX, shape.contentY, shape.contentWidth, shape.contentHeight),
                            alignContent: "center",
                            justifyContent: "center",
                            spacing: 6,
                            lineSpacing: 5
                var texts = entity.name.split(" ");
                for (var i = 0; i < texts.length; i++) {
                    layout.append(new kendo.dataviz.diagram.TextBlock({
                        text: texts[i]
                var path = new kendo.dataviz.diagram.Path({
                    data: shape.path,
                    stroke: stroke,
                    fill: fill,
                    height: Math.max(shape.contentHeight+10, layout.rect().height+10)

    The idea being that I have the default (shape.contentHeight) height, and if the layout height exceeds it I increase the Path height, but sadly Layout.rect() always returns the initial rectangle. 


    Is there a way to query the layout for the actual ("preferred") rectangle size, or at least know if it exceeded the originally allocated one? 



  2. Niko
    Niko avatar
    404 posts

    Posted 03 May 2016 Link to this post

    Hello Itai,

    The Layout class itself uses the rect as a reference container for layouting the shapes. It will not change that value.

    Still the reflow method of the Layout would arrange the shapes in accordance with the provided options. In that respect you could check the bbox of the last text block and get the y coordinate from it. This, along with the height should give you the height of the shape's content. Here is sample code:

    var last = layout.children[layout.children.length -1];
    var box = last.drawingElement.bbox();
    console.log(box.origin.y, box.size.height, box.origin.y + box.size.height);

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top