DashboardLayout
DashboardLayout
Save/Load Layout
This sample shows how to save and load layout in a DashboardLayout control.
Features
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
The DashboardLayout control supports saving its layout into a layout definition text via the client method saveLayout(). It also supports loading a layout from the layout definition text via the client method loadLayout(def).
It is a very helpful feature. It can be used in cases for different users the DashboardLayout control shows different layouts. Or when the dashboard layout is changed, the user wants to get it back.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using MvcExplorer.Models; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class DashboardLayoutController : Controller { // GET: Index public ActionResult SaveLoadLayout() { return View( new DashboardData()); } } } |
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 | @model DashboardData < input type = "button" value = "Save Layout" class = "btn" onclick = "saveLayout()" /> < input type = "button" value = "Load Layout" class = "btn" onclick = "loadLayout()" /> @Html .Partial( "_DashboardElements" , Model) @ (Html.C1().DashboardLayout().Id( "saveLoadDashboard" ) .AttachFlowLayout(flb => flb.Direction(FlowDirection.LeftToRight) .Items(isb => { isb.Add(ftb => ftb.HeaderText( string .Format(Resources.DashboardLayout.SalesDashboard, Model.SalesDashboardStr)) .Content( "#salesDashboardFGrid" ).Width(303).Height(303)); isb.Add(ftb => ftb.HeaderText( string .Format(Resources.DashboardLayout.KPIs, Model.KPIsStr)) .Content( "#kpiGauges" ).Height(303).Width(303)); isb.Add(ftb => ftb.HeaderText( string .Format(Resources.DashboardLayout.CostBudget, Model.CostBudgetingStr)) .Content( "#costBudgetingChart" ).Width(303).Height(303)); isb.Add(ftb => ftb.HeaderText( string .Format(Resources.DashboardLayout.Countrywise, Model.CountrywiseSalesStr)) .Content( "#countrywiseSalesChart" ).Width(303).Height(303)); })) ) @section Scripts{ <script> // Save or restore the layout definition in localStorage function saveLayout() { var dashboard = wijmo.Control.getControl( '#saveLoadDashboard' ); localStorage[ 'layout' ] = dashboard.saveLayout(); } function loadLayout() { var dashboard = wijmo.Control.getControl( '#saveLoadDashboard' ), layoutDef = localStorage[ 'layout' ]; if (layoutDef) { dashboard.loadLayout(layoutDef); } } </script> } @section Summary{ @Html .Raw(Resources.DashboardLayout.SaveLoadLayout_Summary) } @section Description{ < p > @Html .Raw(Resources.DashboardLayout.SaveLoadLayout_Desc1)</ p > < p > @Html .Raw(Resources.DashboardLayout.SaveLoadLayout_Desc2)</ 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 > |