How to avoid text overflow in shape?

[Holger]

Hello,

Is there any possibility to avoid text overflow in a shape?

Maybe by showing a ellipsis or dynamically resizing the shape by it's content size?

Sample: http://dojo.telerik.com/@Holger/utIYE/3

Thanks,
Holger

[Iliana Dyankova]

Hi Holger,

For this scenario you should manually calculate the shapes widths. For your convenience I modified the example with a possible implementation.

Regards,
Iliana Nikolova
Telerik

 

 

[Oscar]

Here you have another implementation:
http://dojo.telerik.com/iWIW

[Holger]

Hello Iliana,
Hello Oscar,

many thanks for your answers. We are now using a similar approach which gives a slightly better result.

Just for completeness, here is the code:

function measureText(text) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    context.font = '15px sans-serif';
    var metrics = context.measureText(text);

    return metrics.width;
}

But all of this is just a workaround. I think the final solution will be to make the rectangle a visual group or parent for embedded elements, so it will grow with the size of it's children.

What do you think?

Regards,
Holger

[Iliana Dyankova]

Hi Holger,

I agree this is a reasonable solution and would suggest to send this idea as a feature request at Kendo UI UserVoice portal - this way the community would be able to vote and comment it. The most popular requests take the highest priority when planning for a release. Thank you in advance.

Regards,
Iliana Nikolova
Telerik

 

 

[Holger]

Link to Kendo UI User Voice:

Diagram: Make the rectangle a visual group