<div id="surface" style="height: 400px;"></div>
<script>
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([200, 0], [300, 300]);
  var pathRect = new Rect([0, 0], [100, 100]);
  var layout = new draw.Layout(rect, {
    orientation: "horizontal",
    spacing: 5
  });

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);
  
  layout.append(pathA, pathB, pathC);

  // Initial arrangement with horizontal orientation
  layout.reflow();
  var surface = draw.Surface.create($("#surface"));
  surface.draw(layout);

  // Change orientation and reflow to rearrange elements
  setTimeout(function() {
    layout.options.set("orientation", "vertical");
    layout.reflow(); // Rearrange elements vertically
    surface.clear();
    surface.draw(layout);
    surface.draw(Path.fromRect(rect));
  }, 2000);
</script>