Search results

Moving Panels in ASP.NET MVC Dashboard Layout control

22 Oct 2021 / 1 minute to read

Other than drag and drop, it is possible to move the panels in Dashboard Layout programatically. This can be achieved using movePanel method. The method is invoked as follows,

Copied to clipboard
movePanel(id, row, col)

Where,

  • id - ID of the panel which needs to be moved.
  • row - New row position for moving the panel.
  • col - New column position for moving the panel.

Each time a panel’s position is changed(Programatically or through UI interaction), the Dashboard Layout’s change event will be triggered.

The following sample demonstrates moving a panel programatically to a new position in the Dashboard Layout’s created event.

razor
HomeController.cs
Copied to clipboard
@model WebApplication.Controllers.HomeController.spacingModel

<div class="control-section">
    <div>
        @Html.EJS().DashboardLayout("dashboard_default").Columns(5).Created("onCreated").Change("onChange").CellSpacing(Model.cellSpacing).AllowResizing(true).Panels(Panel =>
        {
            Panel.SizeX(1).SizeY(1).Row(0).Col(0).Content("<div class='content'>0</div>").Add();
            Panel.SizeX(3).SizeY(2).Row(0).Col(1).Content("<div class='content'>1</div>").Add();
            Panel.SizeX(1).SizeY(3).Row(0).Col(4).Content("<div class='content'>2</div>").Add();
            Panel.SizeX(1).SizeY(1).Row(1).Col(0).Content("<div class='content'>3</div>").Add();
            Panel.SizeX(2).SizeY(1).Row(2).Col(0).Content("<div class='content'>4</div>").Add();
            Panel.SizeX(1).SizeY(1).Row(2).Col(2).Content("<div class='content'>5</div>").Add();
            Panel.SizeX(1).SizeY(1).Row(2).Col(3).Content("<div class='content'>6</div>").Add();
        }).Render()
    </div>
</div>
<script>
function onCreated(args) {
    // movePanel("id", row, col)
    this.movePanel("layout_0", 1, 0);
}
//Dashboard Layout's change event function
function onChange(args) {
    console.log("Change event triggered");
}

</script>
<style>
    #dashboard_default .e-panel .e-panel-container .content {
        vertical-align: middle;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
        line-height: 90px;
    }
</style>
Copied to clipboard
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication.Controllers
{
    public class HomeController : Controller
    {
        public class spacingModel
        {
            public double[] cellSpacing { get; set; }
            public string[] handles { get; set; }
        }
        public ActionResult Index()
        {
            spacingModel modelValue = new spacingModel();
            modelValue.cellSpacing = new double[] { 10, 10 };
            return View(modelValue);
        }
    }
}

Output be like the below.

Moving of panels

You can refer to our ASP.NET Core Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Dashboard Layout example to knows how to present and manipulate data.