Hi Juan,
Thanks for contacting Syncfusion Support.
Yes, we can restrict the resizing functionality in horizontal direction alone by defining required directions () in the
ResizableHandles property of the Dashboard layout component as shown in the below code snippet.
|
[home controller]
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 };
modelValue.handles = new string[] { "e-north", "e-south" };
return View(modelValue);
}
} |
|
[index.cshtml]
@model Resize_dasboard.Controllers.HomeController.spacingModel
@Html.EJS().DashboardLayout("dashboard_default").Columns(5).ResizableHandles(Model.handles).AllowResizing(true).CellSpacing(Model.cellSpacing).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() |
For your convenience, we have also attached a sample by defining the ResizableHandles property to achieve your requirement in the below link. Please check it.
Kindly let us know if you need any further assistance.
Regards,
Keerthana.
