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.00
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 18 19 | using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; using System.Linq; using System.Collections.Generic; using Microsoft.AspNetCore.Http; namespace MvcExplorer.Controllers { public partial class TabPanelController : Controller { // GET: HostingControls public ActionResult HostingControls(IFormCollection 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 | @{ var gridData = ViewBag.GridData; var chartData = ViewBag.ChartData; } <c1-tab-panel id="tabGettingStarted"> <div> <a>FlexGrid</a> <div> <c1-flex-grid id="theGrid" auto-generate-columns="false" class="grid" is-read-only="true"> <c1-flex-grid-column binding="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column> <c1-items-source source-collection="@gridData"></c1-items-source> </c1-flex-grid> </div> </div> <div> <a>FlexChart</a> <div> <c1-flex-chart id="theChart" binding-x="Name" chart-type="Column"> <c1-items-source source-collection="@chartData"></c1-items-source> <c1-flex-chart-series binding="MarPrice"> </c1-flex-chart-series> <c1-flex-chart-series binding="AprPrice"> </c1-flex-chart-series> <c1-flex-chart-series binding="MayPrice"> </c1-flex-chart-series> </c1-flex-chart> </div> </div> <div> <a>Gauges</a> <div style="overflow:hidden"> <c1-radial-gauge id="theRadialGauge" min="0" max="10" value="5" show-text="None" width="300px"> </c1-radial-gauge> <c1-linear-gauge id="theLinearGauge" width="300px"> <c1-gauge-range c1-property="Face" min="0" max="10"></c1-gauge-range> <c1-gauge-range c1-property="Pointer" max="5"></c1-gauge-range> </c1-linear-gauge> </div> </div> </c1-tab-panel> @section Summary{ <p>@Html.Raw(TabPanelRes.HostingControls_Text0)</p> } @section Description{ <p>@Html.Raw(TabPanelRes.HostingControls_Text1)</p> <p>@Html.Raw(TabPanelRes.HostingControls_Text2)</p> } |