DashboardLayout
DashboardLayout
Overview
This sample shows how to use a DashboardLayout control.
Features
Allow Drag: True
Allow Resize: True
Sales Dashboard for 2025
Country
Last 12 Months
Current Year(mil.)
Status
All
$23,642,923,775
US
$4,179,251,640
Germany
$3,977,001,802
UK
$4,144,844,208
Japan
$4,238,248,288
China
$2,691,465,672
India
$4,412,112,165
Country
Last 12 Months
Current Year(mil.)
Status
0
KPIs for 2025
Sales:
Expenses:
Profit:
Cost Budgeting for 2025
Countrywise Sales for 2025
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.
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 | 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; } } } |
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 141 142 143 | @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 > } |