Hosting C1 Controls

One of the main benefits of the TabPanel control is that it automatically updates any C1 controls it contains when a new tab is selected.

When using other tab controls, you must add code to refresh any C1 controls contained in the tabs.

Country
Sales
Expenses
Downloads
US
81,732.54
38,401.13
145,248
Germany
20,603.32
27,944.24
111,632
UK
44,217.79
48,877.49
181,205
Japan
29,190.63
23,365.74
54,740
Italy
46,951.19
49,107.56
126,531
Greece
86,237.02
49,767.35
6,073
USGermanyUKJapanItalyGreece0100,000
75
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Adding
        public ActionResult TabPanelHostC1Controls()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
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
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Nav.TabPanelHostC1Controls_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelHostC1Controls_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelHostC1Controls_Text2)
</p>
 
<div id="theTabPanel">
    <div>
        <a>FlexGrid</a>
        <div>
            @(Html.C1().FlexGrid()
                .AutoGenerateColumns(false)
                .Bind(Model)
                .Columns(csb =>
                {
                    csb.Add().Binding("Country");
                    csb.Add().Binding("Sales");
                    csb.Add().Binding("Expenses");
                    csb.Add().Binding("Downloads");
                }))
        </div>
    </div>
    <div>
        <a>FlexChart</a>
        <div>
            @(Html.C1().FlexChart()
                .Bind("Country", Model)
                .Series(ssb =>
                {
                    ssb.Add().Binding("Sales");
                    ssb.Add().Binding("Expenses");
                    ssb.Add().Binding("Downloads");
                }))
        </div>
    </div>
    <div>
        <a>Gauges</a>
        <div>
            @Html.C1().RadialGauge().Min(0d).Max(100d).Value(75).IsReadOnly(false)
            @Html.C1().LinearGauge().Min(0d).Max(100d).Value(75).IsReadOnly(false)
        </div>
    </div>
</div>
@Html.C1().TabPanel("#theTabPanel")