DashboardLayout
DashboardLayout
Overview
This sample shows how to use a DashboardLayout control.
Features
Sample
Sales:
Expenses:
Profit:
Description
In this sample an auto-grid layout is applied on a DashboardLayout control. Now there are four kinds of layouts supported: FlowLayout, SplitLayout, AutoGridLayout and ManualGridLayout. You can turn to the pages in Layouts category for detail.
In the sample, the tile can be moved, resized and removed. The DashboardLayout control has related properties to turn on or off these features.
Source
IndexController.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
{
public partial class DashboardLayoutController : Controller
{
// GET: /<controller>/
public IActionResult Index()
{
var data = new ClientSettingsModel
{
Settings = CreateLayoutSettings(),
};
data.LoadRequestData(Request);
ViewBag.DemoSettingsModel = data;
return View(new DashboardData());
}
private static IDictionary<string, object[]> CreateLayoutSettings()
{
var settings = new Dictionary<string, object[]>
{
{"AllowDrag", new object[]{true, false}},
{"AllowResize", new object[]{true, false}}
};
return settings;
}
}
}
Index.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" format-tile="formatTile">
<c1-auto-grid-layout orientation="Vertical" max-rows-or-columns="4" cell-size="303">
<c1-auto-grid-group>
<c1-auto-grid-tile header-text="@(string.Format(DashboardLayoutRes.SalesDashboard, Model.SalesDashboardStr))" row-span="1" column-span="1">
<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-auto-grid-tile>
<c1-auto-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-auto-grid-tile>
</c1-auto-grid-group>
<c1-auto-grid-group>
<c1-auto-grid-tile header-text="@(string.Format(DashboardLayoutRes.CostBudget, Model.CostBudgetingStr))" row-span="1" column-span="1">
<c1-flex-chart id="costBudgetChart" 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-auto-grid-tile>
<c1-auto-grid-tile header-text="@(string.Format(DashboardLayoutRes.Countrywise, Model.CountrywiseSalesStr))" row-span="1" column-span="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-auto-grid-tile>
</c1-auto-grid-group>
</c1-auto-grid-layout>
</c1-dashboard-layout>
@section Scripts{
<script type="text/javascript">
function formatTile(dashboardLayout, e) {
var tile = e.tile,
toolbar = e.toolbar;
if(tile.headerText == '@(Html.Raw(string.Format(DashboardLayoutRes.CostBudget, Model.CostBudgetingStr)))'){
var strExportIcon = '<img style="vertical-align:middle" src="@Href("~/Content/images/icon_export.png")" alt="Export" title="Export" />';
toolbar.insertToolbarItem({
icon: strExportIcon,
title: '@Html.Raw(DashboardLayoutRes.CustomTile_Text2)',
command: function () {
var chart = wijmo.Control.getControl('#costBudgetChart');
chart.saveImageToFile('costBudgetChart.png');
}
});
}
}
</script>
}
@section Summary{
@Html.Raw(DashboardLayoutRes.Index_Summary)
}
@section Description{
<p>
@Html.Raw(DashboardLayoutRes.Index_Desc1)
</p>
<p>@Html.Raw(DashboardLayoutRes.Index_Desc2)</p>
}
Documentation