Edit this page

alignItems String (default: "start")

Specifies the alignment of the items based on the largest one. The supported values are:

  • "start" - aligns the items to the start of the largest element.
  • "center" - aligns the items to the center of the largest element.
  • "end" - aligns the items to the end of the largest element.


<div id="surface" style="height: 300px;"></div>
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [300, 300]);
  var layout = new draw.Layout(rect, {
        alignItems: "center"

  var pathA = Path.fromRect(new Rect([0, 0], [100, 100]));
  var pathB = Path.fromRect(new Rect([0, 0], [100, 50]));
  var pathC = Path.fromRect(new Rect([0, 0], [100, 70]));

  layout.append(pathA, pathB, pathC);

  var surface = draw.Surface.create($("#surface"));
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article