Your search did not match any results.

Adaptability

The Diagram can adapt its layout to narrow screens. In this demo, the component'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 component border.
  • The properties panel is docked to the bottom component 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.

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