DashboardLayout
DashboardLayout
Split Layout
This sample shows how to apply a split layout in a DashboardLayout control.
Features
Allow Drag: True
Allow Resize: True
Layout Orientation: Vertical
Sales Dashboard for 2025
Country
Last 12 Months
Current Year(mil.)
Status
All
$151,982,438,632
US
$27,113,966,847
Germany
$25,365,037,850
UK
$25,321,957,945
Japan
$25,804,872,510
China
$23,946,612,888
India
$24,429,990,592
Country
Last 12 Months
Current Year(mil.)
Status
0
KPIs for 2025
Sales:
Expenses:
Profit:
Quarter Sales (1/2025 - 4/2025)
Cost Budgeting for 2025
Countrywise Sales for 2025
Description
This sample shows how to apply a split layout in a DashboardLayout control.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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 SplitLayout() { var data = new ClientSettingsModel { Settings = CreateSplitLayoutSettings() }; data.LoadRequestData(Request); ViewBag.DemoSettingsModel = data; return View(new DashboardData()); } private static IDictionary<string, object[]> CreateSplitLayoutSettings() { var settings = new Dictionary<string, object[]> { {"AllowDrag", new object[]{true, false}}, {"AllowResize", new object[]{true, false}}, {"Layout.Orientation", new object[]{ "Vertical", "Horizontal"}} }; return settings; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | @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-split-layout orientation="Vertical"> <c1-split-group orientation="Vertical" size="2*"> <c1-split-group orientation="Horizontal" size="*"> <c1-split-tile header-text="@(string.Format(DashboardLayoutRes.SalesDashboard, Model.SalesDashboardStr))" size="*"> <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-split-tile> <c1-split-tile header-text="@(string.Format(DashboardLayoutRes.KPIs, Model.KPIsStr))" size="*"> <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-split-tile> </c1-split-group> <c1-split-tile header-text="@(string.Format(DashboardLayoutRes.SplitLayout_Text0, Model.MonthlySalesStr))" size="*"> <c1-flex-chart binding-x="TxnDate" chart-type="Line" legend-position="Top" class="liContentChart"> <c1-items-source source-collection="@Model.MonthlySalesData"></c1-items-source> <c1-flex-chart-axis c1-property="AxisX"></c1-flex-chart-axis> <c1-flex-chart-axis c1-property="AxisY" title="@DashboardLayoutRes.Share_Text6" format="g4,,"></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-trendline binding="Sales" name="@DashboardLayoutRes.Share_Text4" sample-count="200" trend-line-order="3" fit-type="AverageY"> </c1-flex-chart-trendline> <c1-flex-chart-tooltip content="<b>{seriesName}</b><br/>{x} {y:c0}"></c1-flex-chart-tooltip> <c1-chart-gestures id="monthlySalesChart_gestures" mouse-action="Zoom" interactive-axes="X" scale-x="0.5f" scale-y="0.5f" pos-x="0.0f" pos-y="0.0f"></c1-chart-gestures> <c1-chart-animation animation-mode="All" easing="Swing" duration="400"></c1-chart-animation> </c1-flex-chart> </c1-split-tile> </c1-split-group> <c1-split-group orientation="Vertical" size="*"> <c1-split-tile header-text="@(string.Format(DashboardLayoutRes.CostBudget, Model.CostBudgetingStr))" size="*"> <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-split-tile> <c1-split-tile header-text="@(string.Format(DashboardLayoutRes.Countrywise, Model.CountrywiseSalesStr))" size="*"> <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-split-tile> </c1-split-group> </c1-split-layout> </c1-dashboard-layout> @section Summary{ @Html.Raw(DashboardLayoutRes.SplitLayout_Summary) } @section Description{ <p>@Html.Raw(DashboardLayoutRes.SplitLayout_Desc)</p> } |