Split Layout

The split layout is helpful when we want to add the tiles in different orientations for different groups. It enables the users to have nested groups where in each group can have a different orientation. The group can either consist of another or a tile. Each tile can render any MVC or HTML control. The order in which the groups are rendered is determined by the orientation property. When the orientation is set to Horizontal, the groups or tiles are rendered horizontally and when the orientation is set to Vertical, then the groups or tiles are rendered vertically.

The split layout divides the dashboard into multiple section where in you can add multiple tiles to the layout.

Sales Dashboard for 2025

Country

Last 12 Months

Current Year(mil.)

Status

All

$289,112,177,445

$48,442,085,638

Germany

$47,198,883,891

$46,987,226,916

Japan

$50,445,980,341

China

$47,445,296,419

India

$48,592,704,240

KPIs for 2025

Sales:

Expenses:

Profit:

Quarter Sales (4/2025 - 7/2025)

Cost Budgeting for 2025

Countrywise Sales for 2025

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

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

@model DashboardData
 
<h1>
    @Html.Raw(Resources.C1Nav.SplitLayout_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.SplitLayout_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.SplitLayout_Text2)
</p>
@Html.Partial("_DashboardLayoutElements", Model)
@(Html.C1().SplitLayout().Id("splitLayout")
    .Orientation(LayoutOrientation.Horizontal)
    .Items(isb =>
        {
            isb.AddGroup()
                .Size("2*")
                .Orientation(LayoutOrientation.Vertical)
                .Children(vgcb =>
                {
                    vgcb.AddGroup()
                        .Size("*")
                        .Orientation(LayoutOrientation.Horizontal)
                        .Children(hgcb =>
                        {
                            hgcb.AddTile()
                                    .Size("*")
                                    .HeaderText(string.Format(Resources.C1Nav.SalesDashboard, Model.SalesDashboardStr))
                                    .Content("#salesDashboardFGrid");
                            hgcb.AddTile()
                                    .Size("*")
                                    .HeaderText(string.Format(Resources.C1Nav.KPIs, Model.KPIsStr))
                                    .Content("#kpiGauges");
                        });
                    vgcb.AddTile()
                        .Size("*")
                        .HeaderText(string.Format(Resources.C1Nav.SplitLayout_Text0, Model.MonthlySalesStr))
                        .Content("#monthlySalesChart");
                });
 
            isb.AddGroup()
                .Size("*")
                .Orientation(LayoutOrientation.Vertical)
                .Children(hgcb =>
                {
                    hgcb.AddTile()
                        .Size("*")
                        .HeaderText(string.Format(Resources.C1Nav.CostBudget, Model.CostBudgetingStr))
                        .Content("#costBudgetingChart");
                    hgcb.AddTile()
                        .Size("*")
                        .HeaderText(string.Format(Resources.C1Nav.Countrywise, Model.CountrywiseSalesStr))
                        .Content("#countrywiseSalesChart");
                });
        }))
@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>