Dashboard layout is not responsive

5 Replies
2 Participants

Created by
HL Htet Lin

Platform
ASP.NET Core - EJ 2

Platform
ASP.NET Core - EJ 2

Control
DashboardLayout

Created On
Oct 31, 2019 10:15 AM UTC

Last Activity On
Nov 6, 2019 11:44 AM UTC

Want to subscribe?
SIGN IN

I am using <ejs-dashboardlayout> and <e-content-template >. Please help me to check my codes. when i run my page is not responsive thanks.

<ejs-dashboardlayout id="HeaderLayout" columns="12" allowResizing="false" >

<e-content-template >

<page id="Title">IN PATIENTS</page>

<br />

<span>@Html.Raw(ViewBag.InPatient)</span>

<br />

<mat-icon _ngcontent-c21="" id="icon" class="large material-icons" role="img" aria-hidden="true">local_hotel</mat-icon>

</div>

</e-content-template>

<e-content-template>

ADMISSIONS

</page>

<br />

<span><span>@Html.Raw(ViewBag.Admissions)</span></span>

</div>

DISCHARGES

</page>

<br />

<span><span>@Html.Raw(ViewBag.Discharges)</span></span>

</div>

</e-content-template>

<e-content-template>

<page id="Title">SUB ACUTE</page>

<br />

<span><span>@Html.Raw(ViewBag.SubAcute)</span></span>

<br />

<mat-icon _ngcontent-c21="" id="icon" class="mat-icon material-icons" role="img" aria-hidden="true">local_hospital</mat-icon>

</div>

</e-content-template>

<e-content-template>

<br />

<span><span>@Html.Raw(ViewBag.Mdro)</span></span>

<br />

<mat-icon _ngcontent-c21="" class="mat-icon material-icons" id="icon" role="img" aria-hidden="true">security</mat-icon>

</div>

</e-content-template>

</ejs-dashboardlayout>

</div>

<style>

#HeaderLayout .e-panel .e-panel-container {

vertical-align: middle;

font-weight: 400;

font-size: 15px;

text-align: justify;

text-align: center;

color:ghostwhite;

/*padding:10px;*/

border-radius:5px;

}

#Inpatient{

font-weight: 400;

font-size: 18px;

text-align: center;

vertical-align: middle;

background: rgb(2, 136, 209);

color:ghostwhite;

border-radius:5px;

height:100%;

}

#subactute{

font-weight: 400;

font-size: 18px;

text-align: center;

vertical-align: middle;

background: rgb(0, 96, 100);

color:ghostwhite;

border-radius:5px;

height:100%;

}

#mdro{

font-weight: 400;

font-size: 18px;

text-align: center;

vertical-align: middle;

background: rgb(93, 64, 55);

color:ghostwhite;

border-radius:5px;

height:100%;

}

#ADMISSIONS{

font-size: 18px;

color: white;

border-bottom: rgb(74, 20, 140);

background-color: rgb(74, 20, 140);

border-radius:5px;

text-align: center;

width:50%;

height:100%;

float:left;

border-radius:5px;

display: inline-block;

max-width: 250px;

padding: 30px;

word-break: break-all;

}

#DISCHARGES{

font-size: 18px;

color: white;

border-bottom: rgb(56, 142, 60);

background-color: rgb(56, 142, 60);

border-radius:5px;

text-align: center;

height:100%;

border-radius:5px;

padding: 30px;

word-break: break-all;

}

#icon

{

font-size: 55px;

width:100%;

height:100%;

}

</style>

5 Replies

KR Keerthana Rajendran Syncfusion Team November 1, 2019 10:07 AM UTC

Hi Lin,

Good day to you.

We have checked your reported query that, page is not responsive. We suspect that your requirement is, the div element is not adapted to the dashboard layout panel. We have checked your attached code block; in that you had set font-size for div element in pixel. We suggest you to set the CSS style in percentage or use the responsive CSS styles rather than pixel.

For your reference, we have prepared a sample. Refer the sample link below.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication2-1930680838.zip

If we misunderstood your requirement, can you please share the additional details regarding your requirement it will helpful for us to resolve your issue at earlier.

Please let us know, if you have any concerns.

Regards,

Keerthana.

HL Htet Lin November 4, 2019 09:03 AM UTC

Thanks for your reply.

I am modified my codes with reference your simple code.

But still is not responsive.

I share my source codes.Please help me to check.

I also want to know what difference between e-content-template and e-dashboardlayout-panels .Thanks.

Regards,

Htet Lin

Attachment: Testing_Application_1_b8ca1a32.rar

KR Keerthana Rajendran Syncfusion Team November 5, 2019 10:59 AM UTC

Hi Lin,

Good day to you

Query 1 – Panel is not responsive.

We have checked your attached sample. We have sorted out the issue. In Index.cshtml page, dashboard layout component is not referred properly in your shared sample. Refer the below code snippet to render the dashboard layout.

<ejs-dashboardlayout id="defaultLayout" columns="5" created="onCreated">

<e-content-template>

<ejs-chart id="lineContainer" title="Inflation Rate in Percentage" width="100%" height="100%">

</ejs-chart>

</div>

</e-content-template>

</ejs-dashboardlayout>

You are using local data source for grid component, so we were unable to run the attached sample. For your reference, we have prepared a simple sample. In that sample, we have rendered chart component inside the dashboard layout panel using both e-content-template and e-dashboardlayout-panels.

Refer the sample link below: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1344247866.zip

Query 2 – Difference between e-content-template and e-dashboardlayout-panels.

e-dashboardlayout-panels:

Using e-dashboardlayout-panels, tab will allow to define the panel properties through this tag and generate the panel elements dynamically and place then within the layout based on the provided panel properties (row,col, sizeX, sizeY).

e-content-template:

Whereas using content template, the panels will be sorted out from the child content placed within the content template, using the e-panel class and the panel properties will be obtained from the data attributes been added to these panel elements. Here this child element will act as panel element and the content and header templates of these panels will be sorted using the elements containing the e-panel-header and e-panel-content classes within each panel element

Please let us know, if you have any concerns.

Regards,

Keerthana

HL Htet Lin November 6, 2019 07:27 AM UTC

Thank for your reply.

In my simple codes ,Please help me to check Views>DashBoard>Index.cshtml.

That page i already applied Dashboard layout.

Best Regards,

Htet Lin

KR Keerthana Rajendran Syncfusion Team November 6, 2019 11:44 AM UTC

Hi Lin,

Good day to you.

We have checked your Index.cshtml file and sorted out the issue, in that page you have render two dashboard layout. In first dashboard layout, it is not necessary to define each content-template tag for each panel. Since single content-template tag is enough for dashboard layout component to render multiple panels.

Refer the below code snippet.

<ejs-dashboardlayout id="HeaderLayout" columns="12" allowResizing="false">

<e-content-template>

<page id="Title">IN PATIENTS</page>

<br />

<mat-icon _ngcontent-c21="" id="icon" class="large material-icons" role="img" aria-hidden="true">local_hotel</mat-icon>

</div>

. . . . . .

</e-content-template>

</ejs-dashboardlayout>

In second dashboard layout, dashboard layout panel element and its property (sizeX, sizeY, row, col) is not specified. So, the error occurs because it doesn’t create a dashboard layout panel. If you are using e-content-template, it is mandatory to refresh the inner components (like chart) during created() event for dashboard layout. Or else you have use e-dashboard-panels property to define the panels and its inner components. In that case, there is no need for calling the refresh() method.

Refer the below code snippet for e-content-template.

<ejs-dashboardlayout id="DetailLayout" columns="5" allowResizing="false" created="onCreated">

<e-content-template>

<ejs-chart id="lineContainer" title="Inflation Rate in Percentage" width="100%" height="100%">

. . . . . .

</ejs-chart>

</div>

</e-content-template>

</ejs-dashboardlayout>

Refer the code snippet for e-dashboardlayout-panels. Inside the content div you have to render the chart component.

<ejs-dashboardlayout id="DetailLayout1" columns="5" allowResizing="false" created="onCreated">

<e-dashboardlayout-panels>

<e-dashboardlayout-panel row="0" col="0" sizeX="3" sizeY="2" content="#line">

</e-dashboardlayout-panel>

</e-dashboardlayout-panels>

</ejs-dashboardlayout>

<ejs-chart id="lineContainer1" title="Inflation Rate in Percentage" width="100%" height="100%">

. . . . .

</ejs-chart>

</div>

For your reference, we have prepared a sample based on your index page.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication2123038999.zip

Please let us know, if you need further assistance.

Regards,

Keerthana

Need More Help?

Get personalized assistance from our support team.

Contact Support

5 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
HL Htet Lin
Platform
ASP.NET Core - EJ 2
Control
DashboardLayout
Created On
Oct 31, 2019 10:15 AM UTC
Last Activity On
Nov 6, 2019 11:44 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support