Custom Tile
The tile could be customized in the DashboardLayout control. For a tile, there are three areas: Header, Toolbar and Content. All these areas can be customized via this event. The related dom elements or objects can be obtained in the event argument: headerElement, toolbar and contentElement. You can customize these areas by the formatTile event.
ChartType
Sales Dashboard for 2025
Country
Current Year(mil.)
All
$190,731,961,736
US
$34,362,123,817
Germany
$30,297,550,318
UK
$30,963,065,606
Japan
$32,034,092,109
China
$31,120,853,003
India
$31,954,276,883
Country
Current Year(mil.)
0
Country
All
KPIs for 2025
Sales: $190,731,961,736
Expenses: $75,387,925,249
Profit: $115,344,036,487
Countrywise Sales for 2025



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 | // This file locates: "Scripts/Lesson/C1Nav/CustomTile.js". var popup, cmbChartType; function formatTile(sender, e) { var dashboard = sender, // gets the DashboardLayout control tile = e.tile, // gets the formatted tile grid = wijmo.Control.getControl( '#salesDashboardFGrid' ); if (grid && grid.selectedItems && grid.selectedItems.length) { var selectedRowData = grid.selectedItems[0]; switch (tile.headerText) { case 'Country' : // update the tile content. e.tile.hostElement.style.backgroundColor = '#009ccc' ; var htmlContent = '<div style="color:white;">' + countryText + '</div>' + '<div style="font-size:72px; text-align: center; color:white;overflow:hidden; text-overflow:ellipsis">' + selectedRowData.Country + '</div>' ; e.contentElement.innerHTML = htmlContent; break ; case 'KPIs' : // modify the header title. e.headerElement.querySelector( 'span.title' ).innerText = kpisHeaderText; // update the guages properties. var kPIsSalesGauge = wijmo.Control.getControl( '#kPIsSalesGauge' ), kPIsExpensesGauge = wijmo.Control.getControl( '#kPIsExpensesGauge' ), kPIsProfitGauge = wijmo.Control.getControl( '#kPIsProfitGauge' ), kPIsData = selectedRowData.KPIsData, kPIsExpensesGaugeValue = document.getElementById( 'kPIsExpensesGaugeValue' ), kPIsSalesGaugeValue = document.getElementById( 'kPIsSalesGaugeValue' ); kPIsProfitGaugeValue = document.getElementById( 'kPIsProfitGaugeValue' ); kPIsSalesGauge.max = kPIsData.Max; kPIsSalesGauge.value = kPIsData.Sales; kPIsSalesGaugeValue.innerText = share_Text1 + ': ' + wijmo.format( '{Sales:c0}' , kPIsData); kPIsExpensesGauge.max = kPIsData.Max; kPIsExpensesGauge.value = kPIsData.Expenses; kPIsExpensesGaugeValue.innerText = share_Text2 + ': ' + wijmo.format( '{Expenses:c0}' , kPIsData); kPIsProfitGauge.max = kPIsData.Sales; kPIsProfitGauge.value = kPIsData.Profit; kPIsProfitGaugeValue.innerText = share_Text3 + ': ' + wijmo.format( '{Profit:c0}' , kPIsData); break ; case 'Countrywise Sales' : // modify the header title. e.headerElement.querySelector( 'span.title' ).innerText = countrywiseHeaderText; // customize the toolbar var toolbar = e.toolbar; // get the toolbar control. // add a 'Settings' item in toolbar for setting the chart options via dom. var iconClose = document.createElement( 'img' ); iconClose.title = settingsText; iconClose.alt = settingsText; iconClose.style.marginRight = '6px' ; iconClose.style.cursor = 'default' ; iconClose.src = "../Content/images/th.png" ; // insert the item at the first position var eleToolbar = toolbar.hostElement; eleToolbar.insertBefore(iconClose, eleToolbar.firstChild); iconClose.addEventListener( 'click' , function () { // when this item is clicked, show a dialog to specify the chart type. if (!popup) { popup = new wijmo.input.Popup( '#popup' ); } if (!cmbChartType) { cmbChartType = new wijmo.input.ComboBox( '#chartType' , { itemsSource: [ "Column" , "Bar" , "Scatter" , "Line" , "LineSymbols" , "Area" , "Spline" , "SplineSymbols" , "SplineArea" ] }); } var countrywiseSalesChart = wijmo.Control.getControl( '#countrywiseSalesChart' ); if (countrywiseSalesChart) { cmbChartType.text = wijmo.chart.ChartType[countrywiseSalesChart.chartType]; } popup.show( true , function (e) { if (e.dialogResult == 'wj-hide-ok' ) { // apply the chart type var chart = wijmo.Control.getControl( '#countrywiseSalesChart' ); chart.chartType = wijmo.chart.ChartType[cmbChartType.text]; } }); }); // clear all the internal items. toolbar.clear(); // add a custom item in toolbar for exporting the content via toolbar api. var strExportIcon = '<img style="vertical-align:middle" src="../Content/images/icon_export.png" alt="' + exportText + '" title="' + exportText + '" />' ; toolbar.insertToolbarItem({ icon: strExportIcon, title: exportText, command: function () { var selector = e.tile.content, chart = wijmo.Control.getControl(selector); chart.saveImageToFile(selector.substr(1) + '.png' ); } }, 0); break ; default : break ; } } } function gridSelectionChanged(sender, e) { // refresh the DashboardLayout control after the selectionChanged is fired in the grid. var dashboard = wijmo.Control.getControl( '#custom' ); dashboard.refresh(); } |
1 2 3 4 5 6 7 | // This file locates: "Content/css/Lesson/C1Nav/CustomTile.css". .wj-dashboard .wj-flexchart { margin: 0px; padding: 4px; border: none; height: 240px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using LearnMvcClient.Models; using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1NavController : Controller { // GET: Adding public ActionResult CustomTile() { 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 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 | @model DashboardData @using C1.Web.Mvc.Grid; @using C1.Web.Mvc.Chart; @using System.Drawing; @section Scripts{ <script type="text/javascript"> var kpisHeaderText = '@(string.Format(Resources.C1Nav.KPIs, Model.KPIsStr))' ; var exportText = '@Resources.C1Nav.Export' ; var settingsText = '@Resources.C1Nav.Settings' ; var countryText = '@Resources.C1Nav.Share_Header1' ; var share_Text1 = '@Resources.C1Nav.Share_Text1' ; var share_Text2 = '@Resources.C1Nav.Share_Text2' ; var share_Text3 = '@Resources.C1Nav.Share_Text3' ; var countrywiseHeaderText = '@(string.Format(Resources.C1Nav.Countrywise, Model.CountrywiseSalesStr))' ; </script> } < h1 > @Html .Raw(Resources.C1Nav.CustomTile_Title) </ h1 > < p > @Html .Raw(Resources.C1Nav.CustomTile_Text1) </ p > < 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.C1Nav.Share_Header1).Binding( "Country" ).Width( "*" )); clsb.Add(cb => cb.Header(Resources.C1Nav.Share_Header3).Binding( "Sales" ) .Format( "c0" ).Width( "*" )); }) .OnClientSelectionChanged( "gridSelectionChanged" )) < div id = "kpiGauges" > < div id = "kPIsSalesGaugeValue" style = "display:inline-block;margin-bottom:8px;text-align:left;width:100%;" > @Resources .C1Nav.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 .C1Nav.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 .C1Nav.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( "countrywiseSalesChart" ) .BindingX( "Country" ).ChartType(ChartType.Bar) .Legend(Position.Right) .Bind(Model.CountrywiseSalesData) .AxisY(ayb => ayb.Title(Resources.C1Nav.Share_Text6).Format( "g4,," )) .Series(ssb => { ssb.Add().Name(Resources.C1Nav.Share_Text1).Binding( "Sales" ); ssb.Add().Name(Resources.C1Nav.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 id = "popup" class = "modal-content" > < div class = "modal-header" > < button type = "button" tabindex = "-1" class = "close wj-hide" >×</ button > < h4 class = "modal-title" > @Resources .C1Nav.CustomTile_ChartType</ h4 > </ div > < div class = "modal-body" > < div class = "wj-labeled-input" > < input id = "chartType" /> </ div > < div class = "modal-footer" > < button type = "button" class = "btn btn-primary wj-hide-ok" > @Resources .C1Nav.CustomTile_OK</ button > < button type = "button" class = "btn btn-default wj-hide" > @Resources .C1Nav.CustomTile_Cancel</ button > </ div > </ div > </ div > </ div > @ (Html.C1().DashboardLayout().Id( "custom" ) .AttachAutoGridLayout(aglb => aglb.Orientation(LayoutOrientation.Vertical) .MaxRowsOrColumns(6) .CellSize(152) .Items(isb => { isb.Add().Children(cb => { cb.Add().HeaderText( string .Format(Resources.C1Nav.SalesDashboard, Model.SalesDashboardStr)) .Content( "#salesDashboardFGrid" ) .ColumnSpan(2).RowSpan(2) .ShowToolbar( false ); cb.Add().HeaderText( "Country" ) .ColumnSpan(2).RowSpan(1) .ShowHeader( false ).ShowToolbar( false ); cb.Add().HeaderText( "KPIs" ) .Content( "#kpiGauges" ) .RowSpan(2).ColumnSpan(2); cb.Add().HeaderText( "Countrywise Sales" ) .Content( "#countrywiseSalesChart" ) .RowSpan(2).ColumnSpan(3); }); } ) ) .OnClientFormatTile( "formatTile" ) ) |