DashboardLayout
DashboardLayout
ManualGrid Layout
This sample shows how to apply a manual-grid layout in a DashboardLayout control.
Features
Sample
Sales:
Expenses:
Profit:
Description
This sample shows how to apply a manual-grid layout in a DashboardLayout control.
Source
ManualGridLayoutController.cs
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using System.Collections.Generic;
// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
namespace MvcExplorer.Controllers
{
partial class DashboardLayoutController : Controller
{
// GET: /<controller>/
public IActionResult ManualGridLayout()
{
var data = new ClientSettingsModel
{
Settings = CreateAutoGridLayoutSettings(),
DefaultValues = new Dictionary<string, object> {
{"Layout.CellSpacing", 6},
{"Layout.CellSize", 303},
{"Layout.GroupSpacing", 10}
}
};
data.LoadRequestData(Request);
ViewBag.DemoSettingsModel = data;
return View(new DashboardData());
}
private static IDictionary<string, object[]> CreateManualGridLayoutSettings()
{
var settings = new Dictionary<string, object[]>
{
{"AllowDrag", new object[]{true, false}},
{"AllowResize", new object[]{true, false}},
{"Layout.Orientation", new object[]{ "Vertical", "Horizontal"}},
{"Layout.MaxRowsOrColumns", new object[]{ 3, 4, 5, 6 }},
{"Layout.CellSize", new object[]{160, 200, 303, 400}},
{"Layout.CellSpacing", new object[]{ 0, 3, 6, 9}},
{"Layout.GroupSpacing", new object[]{ 0, 5, 10, 15}}
};
return settings;
}
}
}
ManualGridLayout.cshtml
@model DashboardData
@{
ViewBag.DemoSettings = true;
ViewBag.SettingsAtTop = true;
ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
<style>
.liContentChart.wj-flexchart {
min-width: 240px;
margin: 0px;
padding: 4px;
border: none;
height: 240px;
}
</style>
<c1-dashboard-layout id="@demoSettingsModel.ControlId">
<c1-manual-grid-layout orientation="Vertical" max-rows-or-columns="3" cell-size="303">
<c1-manual-grid-group>
<c1-manual-grid-tile header-text="@(string.Format(DashboardLayoutRes.KPIs, Model.KPIsStr))" row-span="1" column-span="1">
<div id="kPIsSalesGaugeValue" style="display:inline-block;margin-bottom:8px;text-align:left;width:100%;">
@DashboardLayoutRes.Share_Text1:
</div>
<c1-linear-gauge id="kPIsSalesGauge" min="0"
max="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Max).FirstOrDefault()"
value="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Sales).FirstOrDefault()"
thumb-size="30"
show-text="None"
width="90%">
<c1-gauge-range c1-property="Pointer" color="Green"></c1-gauge-range>
</c1-linear-gauge>
<div id="kPIsExpensesGaugeValue" style="display:inline-block;margin:20px 0px 8px 0px;text-align:left;width:100%;">
@DashboardLayoutRes.Share_Text2:
</div>
<c1-linear-gauge id="kPIsExpensesGauge" min="0"
max="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Max).FirstOrDefault()"
value="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Expenses).FirstOrDefault()"
thumb-size="30"
show-text="None"
width="90%">
<c1-gauge-range c1-property="Pointer" color="Red"></c1-gauge-range>
</c1-linear-gauge>
<div id="kPIsProfitGaugeValue" style="display:inline-block;margin: 20px 0px 8px 0px;text-align:left;width:100%;">
@DashboardLayoutRes.Share_Text3:
</div>
<c1-linear-gauge id="kPIsProfitGauge" min="0"
max="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Sales).FirstOrDefault()"
value="@Model.KPIsData.Where(x=>x.Country=="All").Select(x=>x.Profit).FirstOrDefault()"
thumb-size="30"
show-text="None"
width="90%">
<c1-gauge-range c1-property="Pointer" color="Gold"></c1-gauge-range>
</c1-linear-gauge>
</c1-manual-grid-tile>
<c1-manual-grid-tile header-text="@(string.Format(DashboardLayoutRes.CostBudget, Model.CostBudgetingStr))" row-span="1" column-span="1" row="1" column="3">
<c1-flex-chart binding-x="Country" legend-position="Top" chart-type="Column" class="liContentChart">
<c1-items-source source-collection="@Model.CostBudgetingData"></c1-items-source>
<c1-flex-chart-axis c1-property="AxisY" title="@DashboardLayoutRes.Share_Text6" format="g4,," log-base="10"></c1-flex-chart-axis>
<c1-flex-chart-series name="@DashboardLayoutRes.Share_Text5" binding="Budget"></c1-flex-chart-series>
<c1-flex-chart-series name="@DashboardLayoutRes.Share_Text2" binding="Expenses" chart-type="Line"></c1-flex-chart-series>
<c1-flex-chart-tooltip content="<b>{seriesName}</b><br/>{x} {y:c0}"></c1-flex-chart-tooltip>
<c1-annotation-layer>
</c1-annotation-layer>
</c1-flex-chart>
</c1-manual-grid-tile>
</c1-manual-grid-group>
<c1-manual-grid-group>
<c1-manual-grid-tile header-text="@(string.Format(DashboardLayoutRes.Countrywise, Model.CountrywiseSalesStr))" row-span="1" column-span="1" row="2" column="1">
<c1-flex-chart binding-x="Country" chart-type="Bar" legend-position="Top" class="liContentChart">
<c1-items-source source-collection="@Model.CountrywiseSalesData"></c1-items-source>
<c1-flex-chart-axis c1-property="AxisX" format="g4,," title="@DashboardLayoutRes.Share_Text6"></c1-flex-chart-axis>
<c1-flex-chart-series name="@DashboardLayoutRes.Share_Text1" binding="Sales"></c1-flex-chart-series>
<c1-flex-chart-series name="@DashboardLayoutRes.Share_Text2" binding="Expenses"></c1-flex-chart-series>
<c1-flex-chart-tooltip content="<b>{seriesName}</b><br/>{x} {y:c0}"></c1-flex-chart-tooltip>
<c1-chart-animation animation-mode="All" easing="Swing" duration="400"></c1-chart-animation>
</c1-flex-chart>
</c1-manual-grid-tile>
<c1-manual-grid-tile header-text="@(string.Format(DashboardLayoutRes.SalesDashboard, Model.SalesDashboardStr))" column-span="1" row-span="1" row="2" column="2">
<c1-flex-grid is-read-only="true"
auto-generate-columns="false"
selection-mode="Row"
allow-resizing="None"
headers-visibility="Column">
<c1-flex-grid-column header="@DashboardLayoutRes.Share_Header1" binding="Country" width="*"></c1-flex-grid-column>
<c1-flex-grid-column header="@DashboardLayoutRes.Share_Header2" width="2*">
<c1-flex-grid-cell-template is-editing="false">
<c1-flex-chart height="20px" width="*" style="padding:0px;"
legend-position="None"
chart-type="Line"
template-bindings="@(new {ItemsSource="Last12MonthsSales"})">
<c1-flex-chart-tooltip is-content-html="false" content=""></c1-flex-chart-tooltip>
<c1-flex-chart-axis c1-property="AxisX" major-unit="100" axis-line="false" minor-grid="false" labels="false" position="None"></c1-flex-chart-axis>
<c1-flex-chart-axis c1-property="AxisY" axis-line="false" minor-grid="false" labels="false" position="None"></c1-flex-chart-axis>
<c1-flex-chart-series binding="Sales"></c1-flex-chart-series>
</c1-flex-chart>
</c1-flex-grid-cell-template>
</c1-flex-grid-column>
<c1-flex-grid-column header="@DashboardLayoutRes.Share_Header3" binding="Sales" format="c0" width="*"></c1-flex-grid-column>
<c1-flex-grid-column header="@DashboardLayoutRes.Share_Header4" width="*">
<c1-flex-grid-cell-template is-editing="false">
<c1-bullet-graph direction="Right" show-ranges="true" thickness="0.5" min="0" template-bindings="@(new {Bad="BulletGBad",Target="BulletGTarget",Good= "BulletGGood",Max = "BulletGMax",Value = "BulletGValue" })">
</c1-bullet-graph>
</c1-flex-grid-cell-template>
</c1-flex-grid-column>
<c1-items-source source-collection="@Model.SalesDashboardData"></c1-items-source>
</c1-flex-grid>
</c1-manual-grid-tile>
</c1-manual-grid-group>
</c1-manual-grid-layout>
</c1-dashboard-layout>
@section Summary{
@Html.Raw(DashboardLayoutRes.ManualGridLayout_Summary)
}
@section Description{
<p>@Html.Raw(DashboardLayoutRes.ManualGridLayout_Desc)</p>
}
Documentation