We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Restrict Dashboard layout resizing orientation

Thread ID:





148760 Nov 2,2019 07:47 PM UTC Nov 5,2019 06:30 AM UTC ASP.NET MVC - EJ 2 3
Tags: DashboardLayout
Juan Jiminez
Asked On November 2, 2019 07:47 PM UTC

Is there any way to restrict the dashboard layout resizing one-way?, I want to allow resizing horizontally only.

Keerthana Rajendran [Syncfusion]
Replied On November 4, 2019 07:23 AM UTC

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); 
@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(); 
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. 

Juan Jiminez
Replied On November 4, 2019 01:54 PM UTC

Thank you Keerthana, that works pretty well!, might want to add it to the docs. Best.

Keerthana Rajendran [Syncfusion]
Replied On November 5, 2019 06:30 AM UTC

Hi Juan,  

Most welcome. We have considered your valuable feedback on documentation and will include this topic in our future document improvement. Please let us know if you need further assistance on this. 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon