DashboardLayout
DashboardLayout
AutoGrid Layout
This sample shows how to apply an auto-grid layout in a DashboardLayout control.
Features
Allow Drag: True
Allow Resize: True
Layout Orientation: Vertical
Layout Max Rows Or Columns: 3
Layout Cell Size: 303
Layout Cell Spacing: 6
Layout Group Spacing: 10
KPIs for 2025
Sales:
Expenses:
Profit:
Cost Budgeting for 2025
Countrywise Sales for 2025
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
Description
This sample shows how to apply an auto-grid 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 36 37 38 39 40 41 42 43 44 45 | 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 AutoGridLayout() { 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 []> CreateAutoGridLayoutSettings() { 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; } } } |
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 | @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-auto-grid-layout orientation = "Vertical" max-rows-or-columns = "3" cell-size = "303" > < c1-auto-grid-group > < 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-tile header-text = "@(string.Format(DashboardLayoutRes.CostBudget, Model.CostBudgetingStr))" row-span = "1" column-span = "1" > < 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-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-group > < c1-auto-grid-tile header-text = "@(string.Format(DashboardLayoutRes.SalesDashboard, Model.SalesDashboardStr))" column-span = "1" row-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-group > </ c1-auto-grid-layout > </ c1-dashboard-layout > @section Summary{ @Html .Raw(DashboardLayoutRes.AutoGridLayout_Summary) } @section Description{ < p > @Html .Raw(DashboardLayoutRes.AutoGridLayout_Desc)</ p > } |