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

Unresponsive elements inside panels in Dashboard Layout

Thread ID:

Created:

Updated:

Platform:

Replies:

146041 Jul 17,2019 03:50 PM UTC Jul 24,2019 09:33 AM UTC ASP.NET MVC - EJ 2 6
loading
Tags: DashboardLayout
Douglas Uriona
Asked On July 17, 2019 03:50 PM UTC

Hello there,

I have an issue regarding the panels in my dashboard layout. In my panels I am using the syncfusion doughnut chart and datagrid as a panel each. While the width is matching the panel size but the height isn't. The height of the syncfusion charts will either be overlapping the panel completely when on a smaller screen or won't be completing covering the panel page when on a bigger screen. I tried changing the height on either the grid/chart or the .content class itself but that didn't work. Thanks in advance.



Here is the code: 


@Html.EJS().DashboardLayout("dashboard_layout").Columns(2).CellSpacing(new double[] { 50, 50 }).Panels(Panel =>
{
    Panel.SizeX(1).SizeY(1).Row(0).Col(0).Content("<div class='content'><ejs-grid id='status-table'></ejs-grid></div>").Add();
    Panel.SizeX(1).SizeY(1).Row(0).Col(1).Content("<div class='content'><ejs-chart id='status-chart'></ejs-chart></div>").Add();
    Panel.SizeX(1).SizeY(1).Row(1).Col(0).Content("<div class='content'><ejs-grid id='priority-table'></ejs-grid></div>").Add();
    Panel.SizeX(1).SizeY(1).Row(1).Col(1).Content("<div class='content'><ejs-chart id='priority-chart'></ejs-chart></div>").Add();
    Panel.SizeX(1).SizeY(1).Row(2).Col(0).Content("<div class='content'><ejs-grid id='decision-table'></ejs-grid></div>").Add();
    Panel.SizeX(1).SizeY(1).Row(2).Col(1).Content("<div class='content'><ejs-chart id='decision-chart'></ejs-chart></div>").Add();

}).Render()

@Html.EJS().AccumulationChart("status-chart").Series(series =>
{
    series.DataSource(ViewBag.dataSourceStatus)
          .XName("xValue")
          .YName("yValue")
          .Name("Status")
          .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
          .DataLabel(ViewBag.DataLabel)
          .InnerRadius("40%")
          .Add();
}).Height("100%").EnableSmartLabels(true).LegendSettings(ls => ls.Visible(true)).Render()

@Html.EJS().AccumulationChart("priority-chart").Series(series =>
{
    series.DataSource(ViewBag.dataSourcePriority)
          .XName("xValue")
          .YName("yValue")
          .Name("Priority")
          .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
          .DataLabel(ViewBag.DataLabel)
          .InnerRadius("40%")
          .Add();
}).Height("100%").EnableSmartLabels(true).LegendSettings(ls => ls.Visible(true)).Render()

@Html.EJS().AccumulationChart("decision-chart").Series(series =>
{
    series.DataSource(ViewBag.dataSourceDecision)
          .XName("xValue")
          .YName("yValue")
          .Name("Decision")
          .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
          .DataLabel(ViewBag.DataLabel)
          .InnerRadius("40%")
          .Add();
}).EnableSmartLabels(true).LegendSettings(ls => ls.Visible(true)).Render()

@Html.EJS().Grid("status-table").DataSource((IEnumerable<object>)ViewBag.dataSourcePortfolioStatus).Columns(col =>
    {
        col.Field("Name").HeaderText("Portfolio Lead").Width("25%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
        col.Field("ActiveProjectCount").HeaderText("Active").Width("25%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
        col.Field("OnHoldProjectCount").HeaderText("On Hold").Width("25%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
        col.Field("NewProjectCount").HeaderText("New").Width("25%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    }).AllowSorting(true).QueryCellInfo("onStatusQueryCellInfo").Render()

@Html.EJS().Grid("priority-table").DataSource((IEnumerable<object>)ViewBag.dataSourcePortfolioPriority).Columns(col =>
{
    col.Field("Name").HeaderText("Portfolio Lead").Width("25%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
    col.Field("HighPriorityCount").HeaderText("High").Width("18.75%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("MediumPriorityCount").HeaderText("Medium").Width("18.75%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("LowPriorityCount").HeaderText("Low").Width("18.75%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("NAPriorityCount").HeaderText("N/A").Width("18.75%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
}).AllowSorting(true).QueryCellInfo("onPriorityQueryCellInfo").Render()

@Html.EJS().Grid("decision-table").DataSource((IEnumerable<object>)ViewBag.dataSourcePortfolioDecision).Columns(col =>
{
    col.Field("Name").HeaderText("Portfolio Lead").Width("25%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
    col.Field("CRDRCount").HeaderText("CRDR").Width("15%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("FIDCount").HeaderText("FID").Width("15%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("IIDCount").HeaderText("IID").Width("15%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("IARDCount").HeaderText("IARD").Width("15%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
    col.Field("NACount").HeaderText("N/A").Width("15%").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
}).AllowSorting(true).QueryCellInfo("onDecisionQueryCellInfo").Render()

<div class="padding-10-px">
    <div>
        <h1>Visualizations</h1>
    </div>
    <div class="control-section">
        <div>
            <ejs-dashboard-layout id="dashboard_layout"></ejs-dashboard-layout>
        </div>
    </div>
</div>

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 18, 2019 12:41 PM UTC

Hi Douglas, 
 
Greetings from Syncfusion support. 
 
We checked your reported query - “Panel content height not properly adjusted on smaller screens“. This can be resolved by setting height and width to 100% to the panel content and its parent element (if any). If custom components like Chart, Grid are rendered then set height and width to 100% for the components also. On setting this the content will be automatically adjusted on resizing based on the panels. 
 
For custom components, you can also call their refresh method which adjusts them within the panel. 
 
Also, you need not render the component tags inside the Dashboard panel’s content property and then initialize them separately like below, 
 
@Html.EJS().DashboardLayout("dashboard_layout").Columns(2).CellSpacing(new double[] { 50, 50 }).Panels(Panel => 
{ 
    Panel.SizeX(1).SizeY(1).Row(0).Col(0).Content("<div class='content'><ejs-grid id='status-table'></ejs-grid></div>").Add(); 
    Panel.SizeX(1).SizeY(1).Row(0).Col(1).Content("<div class='content'><ejs-chart id='status-chart'></ejs-chart></div>").Add(); 
    Panel.SizeX(1).SizeY(1).Row(1).Col(0).Content("<div class='content'><ejs-grid id='priority-table'></ejs-grid></div>").Add(); 
    Panel.SizeX(1).SizeY(1).Row(1).Col(1).Content("<div class='content'><ejs-chart id='priority-chart'></ejs-chart></div>").Add(); 
    Panel.SizeX(1).SizeY(1).Row(2).Col(0).Content("<div class='content'><ejs-grid id='decision-table'></ejs-grid></div>").Add(); 
    Panel.SizeX(1).SizeY(1).Row(2).Col(1).Content("<div class='content'><ejs-chart id='decision-chart'></ejs-chart></div>").Add(); 
 
}).Render() 
 
You can directly initialize the element and provide its id in the content property of the Dashboard panel as like given below, 
 
@(Html.EJS().DashboardLayout("dashboard_layout").Columns(2).CellSpacing(new double[] { 50, 50 }).Panels(Panel => 
                    { 
                        Panel.SizeX(1).SizeY(1).Row(0).Col(1).Content("#status-chart").Header("<div>Chart 1</div>").Add(); 
                    }).Render()) 
<div id="status-chart" class="content"> 
    <div style="height:100%;width:100%;display:block"> 
        @(Html.EJS().AccumulationChart("pie1").Height("100%").Width("100%").Series(series => { series.DataLabel(dl => dl.Visible(true).Name("value").Position(Syncfusion.EJ2.Charts.AccumulationLabelPosition.Inside).Font(font => font.Size("16px").FontWeight("600").Color("white"))).InnerRadius("35%").XName("Device").YName("Amount").Name("Revenue").Type(Syncfusion.EJ2.Charts.AccumulationType.Pie).Radius("100%").StartAngle(0).Palettes(ViewBag.pallets).EndAngle(360).Explode(false).DataSource(ViewBag.PieData1).Add(); }).EnableSmartLabels(true).EnableAnimation(false).Width("100%").Height("100%").LegendSettings(ls => ls.Visible(false).ToggleVisibility(false)).Tooltip(tp => tp.Enable(true).Header("<b>${point.x}</b>").Format("Composition : <b>${point.y}%</b>")).Load("loadPiechart").Render() ) 
    </div> 
</div> 
 
Based on this we have prepared a sample for your reference. Please find it below, 
 
 
In this sample we have rendered 3 Grids and 3 Charts within the Dashboard Layout panel and have set height and width to 100% for them. These are automatically adjusted on resizing the window or panel. 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 
 


Douglas Uriona
Replied On July 18, 2019 03:21 PM UTC

Thanks so much Ashokkumar! Your query fixed worked, I appreciate the quick response.

Douglas Uriona
Replied On July 18, 2019 08:03 PM UTC

Actually Ashokkumar, I have run into another problem. The dashboard's width isn't responsive when the page first loads, the width is usually over 100%. It is only responsive when the window itself is resized. How would I be able to solve this issue? 

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 19, 2019 11:39 AM UTC

Hi Douglas, 
 
Most Welcome. 
 
 Query: The dashboard's width isn't responsive when the page first loads, the width is usually over 100%. It is only responsive when the window itself is resized. How would I be able to solve this issue?  
 
For this scenario, you can use the refresh method to adjust the panels in created event of Dashboard Layout component. 
 
Please check the above provided logic and get back to us, if you require any further assistance. 
 
Regards, 
Ashokkumar B. 


Douglas Uriona
Replied On July 22, 2019 03:14 PM UTC

Thanks to the refresh method, the issue was resolved. Thanks again!

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 24, 2019 09:33 AM UTC

Hi Douglas, 
 
We are glad to hear that the provided solution worked for you. Please let us know, if you need any further assistance. 
 
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