Header and content of panels
19 Dec 202224 minutes to read
The dashboard layout component is mostly used to represent the data used for monitoring or managing a process. These data or any HTML template can be placed as the content of a panel using the content property. Also, word or phrase that summarize the panel’s content can be added as the header on the top of each panel using the header property of the panel.
@model WebApplication.Controllers.HomeController.spacingModel
<div class="control-section">
<div>
<!-- Dashboardlayout element declaration -->
@Html.EJS().DashboardLayout("dashboard_default").Columns(6).CellSpacing(Model.cellSpacing).Panels(Panel =>
{
Panel.Id("Panel0").SizeX(1).SizeY(1).Row(0).Col(0).Header("<div>Panel 0</div>").Content("<div class='content'>Panel Content</div>").Add();
Panel.Id("Panel1").SizeX(3).SizeY(2).Row(0).Col(1).Header("<div>Panel 1</div>").Content("<div class='content'>Panel Content</div>").Add();
Panel.Id("Panel2").SizeX(1).SizeY(3).Row(0).Col(4).Header("<div>Panel 2</div>").Content("<div class='content'>Panel Content</div>").Add();
Panel.Id("Panel3").SizeX(1).SizeY(1).Row(1).Col(0).Header("<div>Panel 3</div>").Content("<div class='content'>Panel Content</div>").Add();
Panel.Id("Panel4").SizeX(2).SizeY(1).Row(2).Col(1).Header("<div>Panel 4</div>").Content("<div class='content'>Panel Content</div>").Add();
Panel.Id("Panel5").SizeX(1).SizeY(1).Row(2).Col(2).Header("<div>Panel 5</div>").Content("<div class='content'>Panel Content</div>").Add();
Panel.Id("Panel6").SizeX(1).SizeY(1).Row(2).Col(3).Header("<div>Panel 6</div>").Content("<div class='content'>Panel Content</div>").Add();
}).Render()
</div>
</div>
<!-- end of dashboardlayout element -->
<style>
/* DashboardLayout element styles */
#dashboard_default .e-panel .e-panel-container .content {
font-weight: 600;
text-align: center;
margin-top: 10px;
line-height: 100%;
}
.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
color: rgba(0, 0, 0, 0.61);
}
.e-panel .e-header-text {
padding: 12px 0 12px 0;
}
#dashboard .e-panel-container .e-panel-header {
border-bottom: 1px solid #888383;
}
.e-dashboard-layout.e-control .e-panel:hover {
border: 0px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
font-size: 15px;
font-weight: 500;
height: 37px;
padding: 10px;
vertical-align: middle;
/* text-align: left; */
border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}
.e-panel-header {
padding: 10px;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
}
</style>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication.Controllers
{
public class HomeController : Controller
{
public class spacingModel
{
public double[] cellSpacing { get; set; }
}
public ActionResult Index()
{
spacingModel modelValue = new spacingModel();
modelValue.cellSpacing = new double[] { 10, 10 };
return View(modelValue);
}
}
}
Placing components as content
In a dashboard, components like charts, grids, maps, gauges, and more can be used to present complex data. Such components can be placed as the panel content by assigning the corresponding component element as the content template of the panel.
NOTE
You must assign the empty div element inside the content template to add the component as content and also define the .e-panel, .e-panel-container, .e-panel-header, and .e-panel-content classes while rendering the DashboardLayout component using content template.
The following sample demonstrates how to add ej2-chart components as the content for each panel in the DashboardLayout component.
@model WebApplication.Controllers.HomeController.spacingModel
<div>
<!-- DashboardLayout element declaration -->
@Html.EJS().DashboardLayout("dashboard_default").Columns(6).CellSpacing(Model.cellSpacing).DraggableHandle(".e-panel-header").Panels(Panel =>
{
Panel.Id("Panel1").SizeX(3).SizeY(2).Row(0).Col(3).ContentTemplate(
@<div>
<div class="e-panel-container">
<div class="e-panel-header">
<div>
Last year sales comparison
</div>
</div>
<div class="e-panel-content">
<div id="column">
<!-- Column Chart element declaration -->
@Html.EJS().Chart("columnChart").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
.XName("month")
.YName("sales")
.DataSource(ViewBag.chartSource).Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Height("162px").Render()
<!-- end of column chart element -->
</div>
</div>
</div>
</div>
).Add();
Panel.Id("Panel2").SizeX(3).SizeY(2).Row(0).Col(3).ContentTemplate(
@<div>
<div class="e-panel-container">
<div class="e-panel-header">
<div>
Mobile browsers usage
</div>
</div>
<div class="e-panel-content">
<div id="pie1">
<!-- Pie Chart element declaration -->
@(Html.EJS().AccumulationChart("pieChart1").Series(series =>
{
series.DataLabel(dl => dl.Visible(true).Name("text").Font(ft => ft.FontWeight("600")).Position(Syncfusion.EJ2.Charts.AccumulationLabelPosition.Inside))
.XName("x")
.YName("y")
.Name("Browser")
.Radius("70%")
.DataSource(ViewBag.pieSource1).Add();
})
.EnableAnimation(false)
.EnableSmartLabels(true)
.Height("162px")
.LegendSettings(ls => ls.Visible(false))
.Tooltip(tp => tp.Enable(true).Format("${point.x} : <b>${point.y}%</b>")).Render()
)
<!-- end of pie chart element -->
</div>
</div>
</div>
</div>
).Add();
Panel.Id("Panel3").SizeX(3).SizeY(2).Row(1).Col(0).ContentTemplate(
@<div>
<div class="e-panel-container">
<div class="e-panel-header">
<div>
Sales increase percentage
</div>
</div>
<div class="e-panel-content">
<div id="line">
<!-- Line Chart element declaration -->
@Html.EJS().Chart("lineChart").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
.XName("x")
.YName("y")
.DataSource(ViewBag.lineSource).Add();
}).Height("162px").Render()
<!-- end of line chart element -->
</div>
</div>
</div>
</div>
).Add();
}).Render()
<!-- end of dashboardlayout element -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var lineObj = document.getElementById('lineChart').ej2_instances[0];
var pieObj = document.getElementById('pieChart1').ej2_instances[0];
var splineObj = document.getElementById('columnChart').ej2_instances[0];
lineObj.refresh(); pieObj.refresh(); splineObj.refresh();
});
</script>
<style>
/* DashboardLayout element styles */
.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
color: rgba(0, 0, 0, 0.61);
}
.e-panel .e-header-text {
padding: 12px 0 12px 0;
}
#dashboard .e-panel-container .e-panel-header {
border-bottom: 1px solid #888383;
}
.e-dashboard-layout.e-control .e-panel:hover {
border: 0px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
font-size: 15px;
font-weight: 500;
height: 37px;
padding: 10px;
vertical-align: middle;
/* text-align: left; */
border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}
.e-panel-header {
padding: 10px;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
height: 30px
}
.e-dashboard-layout.e-control .e-panel .e-panel-header div {
text-align: center;
}
.header {
padding: 5px;
display: inline-block;
}
.e-panel-content {
height: 162px;
}
/* custom generated icons styles */
@@font-face {
font-family: 'e-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
.handler.burg-icon:before {
content: '\e10d';
font-size: 16px;
}
.handler.burg-icon {
float: right;
padding-top: 2%;
}
</style>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication.Controllers
{
public class HomeController : Controller
{
public class spacingModel
{
public double[] cellSpacing { get; set; }
}
public class ChartData
{
public string month;
public double sales;
}
public class LineData
{
public double x;
public double y;
}
public class PieData
{
public string x;
public double y;
public string text;
}
public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData {
month = "Jan",
sales = 35,
},
new ChartData {
month = "Feb",
sales = 28,
},
new ChartData {
month = "Mar",
sales = 34,
},
new ChartData {
month = "Apr",
sales = 32,
},
new ChartData {
month = "May",
sales = 40,
},
new ChartData {
month = "Jun",
sales = 32,
},
new ChartData {
month = "Jul",
sales = 35,
},
new ChartData {
month = "Aug",
sales = 55,
},
new ChartData {
month = "Sep",
sales = 38,
},
new ChartData {
month = "Oct",
sales = 30,
},
new ChartData {
month = "Nov",
sales = 25,
},
new ChartData {
month = "Dec",
sales = 32,
}
};
ViewBag.chartSource = chartData;
List<LineData> lineData = new List<LineData>
{
new LineData {
x = 2013,
y = 28,
},
new LineData {
x = 2014,
y = 25,
},
new LineData {
x = 2015,
y = 26,
},
new LineData {
x = 2016,
y = 27,
},
new LineData {
x = 2017,
y = 32,
},
new LineData {
x = 2018,
y = 35,
}
};
ViewBag.lineSource = lineData;
List<PieData> pieData1 = new List<PieData>
{
new PieData {
x = "Chrome",
y = 37,
text = "37%",
},
new PieData {
x = "UC Browser",
y = 17,
text = "17%",
},
new PieData {
x = "iPhone",
y = 19,
text = "19%",
},
new PieData {
x = "Others",
y = 4,
text = "4%",
},
new PieData {
x = "Opera",
y = 11,
text = "11%",
},
new PieData {
x = "Android",
y = 12,
text = "12%",
}
};
ViewBag.pieSource1 = pieData1;
spacingModel modelValue = new spacingModel();
modelValue.cellSpacing = new double[] { 10, 10 };
return View(modelValue);
}
}
}
NOTE
You can refer to our ASP.NET Core Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Dashboard Layout example to knows how to present and manipulate data.