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,
movePanel(id, row, col)
Where,
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.
@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>
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.