Getting started with ASP.NET Core Dashboard Layout control
This section briefly explains about how to render DashboardLayout component in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part part of the system requirements and configure the common specifications.
Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include the license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET Core application to use our control.
Add DashboardLayout to the application
You can render the DashboardLayout component in the following two ways.
- Defined the panels property as the attribute in the content template.
- Using the
panelsproperty through tag helper.
Setting the panels property using content template
DashboardLayout component can be rendered by using the ejs-dashboardlayout tag helper in ASP.NET Core application. Add the below simple code to your index.cshtml page which is available within the Views/Home folder, to initialize the DashboardLayout.
In the following sample, the dashboardlayout is rendered with panels property using content template.
<div class=" control-section">
<!-- DashboardLayout element declaration -->
<ejs-dashboardlayout id="defaultLayout" columns="6" cellSpacing="@Model.cellSpacing">
<e-content-template>
<div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">0</div>
</div>
</div>
<div id="two" class="e-panel" data-row="1" data-col="0" data-sizeX="1" data-sizeY="2">
<div class="e-panel-container">
<div class="text-align">1</div>
</div>
</div>
<div id="three" class="e-panel" data-row="0" data-col="1" data-sizeX="2" data-sizeY="2">
<div class="e-panel-container">
<div class="text-align">2</div>
</div>
</div>
<div id="four" class="e-panel" data-row="2" data-col="1" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">3</div>
</div>
</div>
<div id="five" class="e-panel" data-row="2" data-col="2" data-sizeX="2" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">4</div>
</div>
</div>
<div id="six" class="e-panel" data-row="0" data-col="3" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">5</div>
</div>
</div>
<div id="seven" class="e-panel" data-row="1" data-col="3" data-sizeX="1" data-sizeY="1">
<div class="e-panel-container">
<div class="text-align">6</div>
</div>
</div>
<div id="eight" class="e-panel" data-row="0" data-col="4" data-sizeX="1" data-sizeY="3">
<div class="e-panel-container">
<div class="text-align">7</div>
</div>
</div>
</e-content-template>
</ejs-dashboardlayout>
<!-- end of dashboardlayout element -->
</div>
<style>
/* DashboardLayout element styles */
#defaultLayout {
padding: 10px;
}
#defaultLayout .e-panel .e-panel-container {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
}
.text-align {
line-height: 160px;
}
</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);
}
}
}Output be like the below.
Setting the panels property using tag helper
You can render the DashboardLayout component by using the panels property through e-dashboardlayout-panels tag helper.
In the following sample, the dashboardlayout is rendered with panels property using tag helper.
<div class=" control-section">
<!-- DashboardLayout element declaration -->
<ejs-dashboardlayout id="defaultLayout" columns="6" cellSpacing="@Model.cellSpacing">
<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>
<!-- end of dashboardlayout element -->
</div>
<style>
/* DashboardLayout element styles */
#defaultLayout {
padding: 10px;
}
#defaultLayout .e-panel .e-panel-container {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 160px;
}
</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);
}
}
}Output be like the below.
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.