Data Visualization ▸ 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.

@(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%;
}