TabPanel
TabPanel
Hosting C1 MVC Controls
This view shows hosting C1 MVC controls in TabPanel control.
Features
ID
Country
Product
Color
Amount
1
German
Gadget
Green
581.61
2
Italy
Gadget
Green
-4,673.75
3
China
Gadget
Black
-2,265.49
4
France
Widget
Green
3,964.40
5
UK
Widget
Red
-1,744.99
6
France
Gadget
Red
4,276.37
7
US
Widget
Green
-4,376.92
8
Japan
Gadget
Black
1,996.52
9
Korea
Widget
Red
-3,442.35
10
US
Widget
Green
-2,973.96
11
Canada
Widget
Green
-3,217.79
12
UK
Gadget
Red
1,556.19
13
Canada
Gadget
Red
-4,981.75
14
China
Gadget
Green
-397.56
15
Italy
Widget
Green
199.60
16
China
Gadget
Green
-176.56
17
Canada
Widget
Black
-542.28
18
Japan
Gadget
Red
4,319.97
19
France
Gadget
Green
-1,397.67
20
UK
Widget
Black
-3,476.95
21
UK
Gadget
Red
3,295.03
22
China
Widget
Red
-4,598.11
23
Korea
Widget
Red
-3,396.86
24
German
Widget
Green
4,399.82
25
Korea
Gadget
Red
3,235
26
Korea
Widget
Red
341.60
27
France
Widget
Red
1,561.78
28
German
Widget
Red
-191.55
29
Korea
Widget
Black
1,516.57
30
Italy
Gadget
Red
4,470.85
31
Canada
Widget
Black
4,796.84
32
France
Gadget
Black
2,871.26
33
US
Gadget
Green
-3,744.20
34
Japan
Widget
White
-2,588.21
35
Japan
Widget
Black
-3,709.87
36
German
Gadget
Green
-2,500.33
37
China
Gadget
White
1,169.17
38
UK
Widget
White
-3,578.79
39
UK
Gadget
Black
-3,175.21
40
US
Widget
Red
-2,410.67
41
UK
Widget
Black
1,645.36
42
German
Widget
Red
-38.23
43
China
Widget
White
-2,409.07
44
Korea
Gadget
Black
-1,396.05
45
US
Widget
White
-78.75
46
Japan
Gadget
White
-3,179.15
47
Japan
Widget
Green
-1,872.55
48
US
Widget
White
2,186.94
49
Canada
Widget
White
-4,924.10
50
US
Widget
Green
-3,540.61
ID
Country
Product
Color
Amount
0
Description
One of the main benefits of the TabPanel control is that it automatically updates any C1 MVC controls it contains when a new tab is selected.
When using other tab controls, you must add code to refresh any C1 MVC controls contained in the tabs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | using MvcExplorer.Models;using System.Web.Mvc;using System.Collections.Generic;namespace MvcExplorer.Controllers{ public partial class TabPanelController : Controller { // GET: HostingControls public ActionResult HostingControls(FormCollection collection) { ViewBag.GridData = Sale.GetData(50); ViewBag.ChartData = Fruit.GetFruitsSales(); return View(); } }} |
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 | @{ var gridData = ViewBag.GridData as IEnumerable<Sale>; var chartData = ViewBag.ChartData as IEnumerable<Fruit>;}<div id="tabGettingStarted"> <div> <a>FlexGrid</a> <div> @(Html.C1().FlexGrid<Sale>().Id("theGrid").CssClass("grid") .AutoGenerateColumns(false).IsReadOnly(true) .Bind(gridData) .Columns(cs => { cs.Add().Binding("ID"); cs.Add().Binding("Country"); cs.Add().Binding("Product"); cs.Add().Binding("Color"); cs.Add().Binding("Amount"); })) </div> </div> <div> <a>FlexChart</a> <div> @(Html.C1().FlexChart().Id("theChart") .Bind(chartData).BindingX("Name") .ChartType(C1.Web.Mvc.Chart.ChartType.Column) .Series(ss => { ss.Add().Binding("MarPrice"); ss.Add().Binding("AprPrice"); ss.Add().Binding("MayPrice"); })) </div> </div> <div> <a>Gauges</a> <div style="overflow:hidden"> @Html.C1().RadialGauge().Id("theRadialGauge").Min(0).Max(10).Value(5).ShowText(ShowText.None).Width(300) @(Html.C1().LinearGauge().Id("theLinearGauge").Width(300) .Face(f => f.Min(0).Max(10)) .Pointer(p=>p.Max(5)) ) </div> </div></div>@Html.C1().TabPanel("#tabGettingStarted")@section Summary{ <p>@Html.Raw(Resources.TabPanel.HostingControls_Text0)</p>}@section Description{ <p>@Html.Raw(Resources.TabPanel.HostingControls_Text1)</p> <p>@Html.Raw(Resources.TabPanel.HostingControls_Text2)</p>} |