Unresponsive elements inside panels in Dashboard Layout

[Douglas Uriona]

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]

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, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/146041/ze/Dashboard1-584087513  

 

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]

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

[Douglas Uriona]

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]

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]

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

[Ashokkumar Balasubramanian]

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.