Your search did not match any results.


The Diagram can adapt its layout to narrow screens. In this demo, the widget's Height property is set to 100% to fit a screen.

Note the following changes to the toolbox and properties panel:

  • The toolbox is docked to the left widget border.
  • The properties panel is docked to the bottom widget border.
  • A tool slides out of the screen when a user drags a shape from the toolbox or edits an item's text.
  • Only one tool can be displayed at a time.

You can switch between landscape and portrait layouts to see the Diagram's appearance and behavior on wide and narrow screens.

@(Html.DevExtreme().Diagram() .ID("diagram") .AutoZoomMode(DiagramAutoZoomMode.FitWidth) ) <script type="text/javascript"> $(function () { $.ajax({ url: "@Url.Content("~/Content/SampleData/diagram-flow.json")", dataType: "text", success: function(data) { $("#diagram").dxDiagram("instance").import(data); } }); }); </script>
using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class DiagramController : Controller { public ActionResult Adaptability() { return View(); } } }
.demo-container, #diagram { height: 100%; }