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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Any way to constrain a dashboard layout?

Thread ID:

Created:

Updated:

Platform:

Replies:

146938 Aug 26,2019 12:51 PM UTC Aug 27,2019 10:36 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: DashboardLayout
doug kuchna
Asked On August 26, 2019 12:51 PM UTC

Good Morning:

I have a dashboard layout nested in another dashboard layout.

Is it possible to limit the resizing of the nested layout so that items stay within their panel?

In the below example, I do not want "dashboard_layout" to exceed the boundaries of "dashboard_default"


<div>
    <!--  DashboardLayout element declaration -->
    <ejs-dashboardlayout id="dashboard_default" columns="6" draggableHandle=".e-panel-header" cellSpacing="@Model.CellSpacing">
        <e-dashboardlayout-panels>
            <e-dashboardlayout-panel id="Panel1" sizeX="3" sizeY="2" row="0" col="3" header="<div class='header'>Last year sales comparison</div>" content="<div id='dashboard_layout'></div>">
            </e-dashboardlayout-panel>
        </e-dashboardlayout-panels>
    </ejs-dashboardlayout>
    <!-- end of dashboardlayout element -->
</div>

<div id="column">
    <ejs-dashboardlayout id="dashboard_layout" columns="5" cellSpacing="@Model.ChildCellSpacing" allowResizing="true" >
        <e-dashboardlayout-panels>
            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0" content="<div>0</div>">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel sizeX="3" sizeY="2" row="0" col="1" content="<div>1</div>">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel sizeX="1" sizeY="3" row="0" col="4" content="<div>2</div>">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="1" col="0" content="<div>3</div>">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel sizeX="2" sizeY="1" row="2" col="0" content="<div>4</div>">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="2" col="2" content="<div>5</div>">
            </e-dashboardlayout-panel>
            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="2" col="3" content="<div>6</div>">
            </e-dashboardlayout-panel>
        </e-dashboardlayout-panels>
    </ejs-dashboardlayout>
</div>


Thanks in advance.

Doug Kuchna






Ashokkumar Balasubramanian [Syncfusion]
Replied On August 27, 2019 10:36 AM UTC

Hi doug kuchna, 
 
Good day to you. 
 
We have analyzed your query to restrain the nested dashboard panels within the parent dashboards panel element. In Dashboard layout, we have restricted the panel flow in the horizontal direction alone. This is because in vertical direction, the number rows in the Dashboard layout component is unpredictable and may change dynamically during resizing or dragging the panels, so the height of the component cannot be restrained from the component side. However, you can achieve your requirement by setting the overflow-y: auto CSS for the panel within which the inner dashboard is rendered to restrict the panels flow within the parent panel element. 
 
Refer the below code snippet for CSS styles. 
 
<style> 
    #Panel1 { 
        overflow-y: auto; 
    } 
</style> 
 
Here, we have prepared a sample for your reference. 
 
 
Please check the above sample and get back to us if you need any further assistance on this. 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

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