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
$119,330,226,326
US
$21,164,539,255
Germany
$19,929,179,049
UK
$20,179,901,578
Japan
$19,460,366,976
China
$18,797,938,510
India
$19,798,300,958
KPIs for 2025
Sales:
Expenses:
Profit:
Quarter Sales (12/2024 - 3/2025)
SalesExpensesSales Trend LineDec 7Dec 21Jan 4Jan 18Feb 1Feb 15Mar 1Mar 15Mar 2910002000in millions
Cost Budgeting for 2025
BudgetExpensesChinaGermanyIndiaJapanUKUS10000100010010in millions
Countrywise Sales for 2025
ExpensesSales0USGermanyUKJapanChinaIndiain millions
1
2
3
4
5
6
7
8
// 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;
});
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 SplitLayout()
        {
            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
@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")
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.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>