Flow Layout

When the flow layout is applied in the DashboardLayout control, it arranges child containers into either rows or columns, per the direction property. By default, the flow of items is wrapped at the control's edge, so when one column/row ends, another one automatically starts.

Sales Dashboard for 2025

Country

Last 12 Months

Current Year(mil.)

Status

All

$283,686,889,706

$47,519,839,361

Germany

$46,330,719,762

$45,869,672,473

Japan

$49,679,773,910

China

$46,511,157,831

India

$47,775,726,369

KPIs for 2025

Sales:

Expenses:

Profit:

Cost Budgeting for 2025

Countrywise Sales for 2025

// This file locates: "Scripts/Lesson/C1Nav/FlowLayout.js".
c1.documentReady(function () {
    var dashboardLayout = wijmo.Control.getControl('#dashboardLayout'),
        flowLayout = c1.getService('flowLayout');
 
    // applies the layout to the DashboardLayout control.
    dashboardLayout.layout = flowLayout;
});

using LearnMvcClient.Models;
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Adding
        public ActionResult FlowLayout()
        {
            return View(new DashboardData());
        }
    }
}

@model DashboardData
 
<h1>
    @Html.Raw(Resources.C1Nav.FlowLayout_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.FlowLayout_Text1)
     
</p>
@Html.Partial("_DashboardLayoutElements", Model)
@(Html.C1().FlowLayout().Id("flowLayout")
    .Direction(FlowDirection.LeftToRight)
    .Items(isb =>
    {
        isb.Add(ftb => ftb.HeaderText(string.Format(Resources.C1Nav.SalesDashboard, Model.SalesDashboardStr))
    .Content("#salesDashboardFGrid").Width(303).Height(303));
        isb.Add(ftb => ftb.HeaderText(string.Format(Resources.C1Nav.KPIs, Model.KPIsStr))
            .Content("#kpiGauges").Height(303).Width(303));
        isb.Add(ftb => ftb.HeaderText(string.Format(Resources.C1Nav.CostBudget, Model.CostBudgetingStr))
            .Content("#costBudgetingChart").Width(303).Height(303));
        isb.Add(ftb => ftb.HeaderText(string.Format(Resources.C1Nav.Countrywise, Model.CountrywiseSalesStr))
            .Content("#countrywiseSalesChart").Width(303).Height(303));
    }))
@Html.C1().DashboardLayout().Id("dashboardLayout")

@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.C1Nav.Share_Header1).Binding("Country").Width("*"));
            clsb.Add(cb => cb.Header(Resources.C1Nav.Share_Header2).Width("2*")
                .CellTemplate(ctb => ctb.TemplateId("last12MonthTemplate")));
            clsb.Add(cb => cb.Header(Resources.C1Nav.Share_Header3).Binding("Sales")
                .Format("c0").Width("*"));
            clsb.Add(cb => cb.Header(Resources.C1Nav.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.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("monthlySalesChart")
        .CssClass("liContentChart")
        .BindingX("TxnDate")
        .ChartType(ChartType.Line)
        .Legend(Position.Top)
        .Bind(Model.MonthlySalesData)
        .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");
            ssb.AddTrendLine().Name(Resources.C1Nav.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.C1Nav.Share_Text6).Format("g4,,").LogBase(10))
        .Series(ssb =>
        {
            ssb.Add().Name(Resources.C1Nav.Share_Text5).Binding("Budget");
            ssb.Add().Name(Resources.C1Nav.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.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>