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
$7,958,226,275
US
$1,443,037,815
Germany
$1,516,227,500
UK
$1,083,466,777
Japan
$1,903,377,770
China
$316,063,276
India
$1,696,053,137
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 | using MvcExplorer.Models; using System.Collections.Generic; using System.Web.Mvc; namespace MvcExplorer.Controllers { partial class DashboardLayoutController { // GET: Index public ActionResult 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 | @model DashboardData @ { ViewBag.DemoSettings = true ; ViewBag.SettingsAtTop = true ; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } @Html .Partial( "_DashboardElements" , Model) @ (Html.C1().DashboardLayout().Id(demoSettingsModel.ControlId) .AttachAutoGridLayout(aglb => aglb.Orientation(LayoutOrientation.Vertical) .MaxRowsOrColumns(3) .CellSize(303) .Items(isb => { isb.Add().Children(cb => { cb.Add().HeaderText( string .Format(Resources.DashboardLayout.KPIs, Model.KPIsStr)) .Content( "#kpiGauges" ) .RowSpan(1).ColumnSpan(1); cb.Add().HeaderText( string .Format(Resources.DashboardLayout.CostBudget, Model.CostBudgetingStr)) .Content( "#costBudgetingChart" ) .RowSpan(1).ColumnSpan(1); cb.Add().HeaderText( string .Format(Resources.DashboardLayout.Countrywise, Model.CountrywiseSalesStr)) .Content( "#countrywiseSalesChart" ) .RowSpan(1).ColumnSpan(1); }); isb.Add().Children(cb => { cb.Add().HeaderText( string .Format(Resources.DashboardLayout.SalesDashboard, Model.SalesDashboardStr)) .Content( "#salesDashboardFGrid" ) .ColumnSpan(1).RowSpan(1); }); }))) @section Summary{ @Html .Raw(Resources.DashboardLayout.AutoGridLayout_Summary) } @section Description{ < p > @Html .Raw(Resources.DashboardLayout.AutoGridLayout_Desc)</ p > } |
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 144 145 146 147 148 149 150 151 152 153 | @using C1.Web.Mvc.Grid; @using C1.Web.Mvc.Chart; @using System.Drawing; @model DashboardData < style > .liContentChart.wj-flexchart{ min-width:240px; margin: 0px; padding: 4px; border: none; height:240px; } </ style > <script id="last12MonthTemplate" type="text/template"> @ (Html.C1().FlexChart() .Height( "20px" ) .Width( "*" ) .CssStyle( "padding" , "0px" ) .Legend(Position.None).ChartType(ChartType.Line) .ToTemplate() .TemplateBind( "ItemsSource" , "Last12MonthsSales" ) .AxisX(axb => axb.MajorUnit(100).AxisLine( false ) .MinorGrid( false ).Labels( false ).Position(Position.None)) .AxisY(ayb => ayb.AxisLine( false ).MinorGrid( false ).Labels( false ) .Position(Position.None)) .Series(ssb => ssb.Add().Binding( "Sales" ))) </script> <script id="statusTemplate" type="text/template"> @ (Html.C1().BulletGraph() .Direction(GaugeDirection.Right) .ShowRanges( true ).Thickness(0.5).Min(0) .ToTemplate() .TemplateBind( "Bad" , "BulletGBad" ) .TemplateBind( "Target" , "BulletGTarget" ) .TemplateBind( "Good" , "BulletGGood" ) .TemplateBind( "Max" , "BulletGMax" ) .TemplateBind( "Value" , "BulletGValue" )) </script> < div style = "position:absolute;left:-10000px; top:-10000px; visibility:hidden" > @ (Html.C1().FlexGrid() .Id( "salesDashboardFGrid" ) .IsReadOnly( true ).AutoGenerateColumns( false ) .HeadersVisibility(HeadersVisibility.Column) .AllowResizing(AllowResizing.None) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row) .Bind(Model.SalesDashboardData) .Columns(clsb => { clsb.Add(cb => cb.Header(Resources.DashboardLayout.Share_Header1).Binding( "Country" ).Width( "*" )); clsb.Add(cb => cb.Header(Resources.DashboardLayout.Share_Header2).Width( "2*" ) .CellTemplate(ctb => ctb.TemplateId( "last12MonthTemplate" ))); clsb.Add(cb => cb.Header(Resources.DashboardLayout.Share_Header3).Binding( "Sales" ) .Format( "c0" ).Width( "*" )); clsb.Add(cb => cb.Header(Resources.DashboardLayout.Share_Header4).Width( "*" ) .CellTemplate(ctb => ctb.TemplateId( "statusTemplate" ))); })) < div id = "kpiGauges" > < div id = "kPIsSalesGaugeValue" style = "display:inline-block;margin-bottom:8px;text-align:left;width:100%;" > @Resources .DashboardLayout.Share_Text1: </ div > @ (Html.C1().LinearGauge() .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()) .ThumbSize(30d) .ShowText(ShowText.None) .Width( "90%" ) .Pointer(rb => rb.Color(Color.Green))) < div id = "kPIsExpensesGaugeValue" style = "display:inline-block;margin:20px 0px 8px 0px;text-align:left;width:100%;" > @Resources .DashboardLayout.Share_Text2: </ div > @ (Html.C1().LinearGauge() .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()) .ThumbSize(30d) .ShowText(ShowText.None) .Width( "90%" ) .Pointer(rb => rb.Color(Color.Red))) < div id = "kPIsProfitGaugeValue" style = "display:inline-block;margin: 20px 0px 8px 0px;text-align:left;width:100%;" > @Resources .DashboardLayout.Share_Text3: </ div > @ (Html.C1().LinearGauge() .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()) .ThumbSize(30d) .ShowText(ShowText.None) .Width( "90%" ) .Pointer(rb => rb.Color(System.Drawing.Color.Gold))) </ div > @ (Html.C1().FlexChart() .Id( "monthlySalesChart" ) .CssClass( "liContentChart" ) .BindingX( "TxnDate" ) .ChartType(ChartType.Line) .Legend(Position.Top) .Bind(Model.MonthlySalesData) .AxisY(ayb => ayb.Title( @Resources .DashboardLayout.Share_Text6).Format( "g4,," )) .Series(ssb => { ssb.Add().Name( @Resources .DashboardLayout.Share_Text1).Binding( "Sales" ); ssb.Add().Name( @Resources .DashboardLayout.Share_Text2).Binding( "Expenses" ); ssb.AddTrendLine().Name( @Resources .DashboardLayout.Share_Text4).Binding( "Sales" ) .SampleCount(200).TrendLineOrder(3) .FitType(TrendLineFitType.AverageY); }) .Tooltip(ttb => ttb.Content( "<b>{seriesName}</b><br/>{x} {y:c0}" )) .SupportGestures(sgb => sgb.MouseAction(MouseAction.Zoom) .Id( "monthlySalesChart_gestures" ).InteractiveAxes(InteractiveAxes.X) .ScaleX(0.5f).ScaleY(0.5f) .PosX(0f).PosY(0f)) .ShowAnimation(ab => ab.AnimationMode(AnimationMode.All) .Easing(Easing.Swing).Duration(400))) @ (Html.C1().FlexChart() .Id( "costBudgetingChart" ) .CssClass( "liContentChart" ) .BindingX( "Country" ).ChartType(ChartType.Column) .Legend(Position.Top) .Bind(Model.CostBudgetingData) .AxisY(ayb => ayb.Title( @Resources .DashboardLayout.Share_Text6).Format( "g4,," ).LogBase(10)) .Series(ssb => { ssb.Add().Name( @Resources .DashboardLayout.Share_Text5).Binding( "Budget" ); ssb.Add().Name( @Resources .DashboardLayout.Share_Text2).Binding( "Expenses" ); }) .Tooltip(ttb => ttb.Content( "<b>{seriesName}</b><br/>{x} {y:c0}" ))) @ (Html.C1().FlexChart() .Id( "countrywiseSalesChart" ) .CssClass( "liContentChart" ) .BindingX( "Country" ) .ChartType(ChartType.Bar) .Legend(Position.Top) .Bind(Model.CountrywiseSalesData) .AxisY(ayb => ayb.Title( @Resources .DashboardLayout.Share_Text6).Format( "g4,," )) .Series(ssb => { ssb.Add().Name( @Resources .DashboardLayout.Share_Text1).Binding( "Sales" ); ssb.Add().Name( @Resources .DashboardLayout.Share_Text2).Binding( "Expenses" ); }) .Tooltip(ttb => ttb.Content( "<b>{seriesName}</b><br/>{x} {y:c0}" )) .ShowAnimation(ab => ab.AnimationMode(AnimationMode.All) .Easing(Easing.Swing).Duration(400))) </ div > |