TabPanel
TabPanel
Hosting C1 MVC Controls
This view shows hosting C1 MVC controls in TabPanel control.
Features
ID
Country
Product
Color
Amount
ID
Country
Product
Color
Amount
1
US
Gadget
Red
($2,587.64)
2
Canada
Widget
Red
$3,195.89
3
German
Widget
White
$2,313.31
4
Italy
Gadget
Black
($3,193.81)
5
US
Gadget
Green
$1,992.89
6
Korea
Gadget
White
($2,311.22)
7
China
Gadget
Black
$201.09
8
US
Widget
Black
$2,042.44
9
France
Widget
Green
$2,813.06
10
Japan
Gadget
White
($3,239.35)
11
Canada
Gadget
White
$3,444.62
12
German
Widget
Black
($3,247.41)
13
Korea
Widget
Red
$1,792.87
14
Italy
Widget
White
($3,030.91)
15
Canada
Gadget
White
($121.49)
16
Canada
Widget
Red
($1,085.25)
17
UK
Widget
White
($3,633.76)
18
UK
Widget
White
$3,547.59
19
China
Gadget
Black
$1,670.89
20
Canada
Widget
Black
$2,526.83
21
UK
Widget
Red
$2,468.49
22
German
Gadget
Black
($4,369.28)
23
China
Widget
Black
($4,571.27)
24
Japan
Widget
Red
($3,951.78)
25
US
Widget
Black
($4,441.14)
26
UK
Gadget
Red
($71.63)
27
UK
Gadget
Red
$4,479.22
28
Korea
Gadget
Green
$3,725.41
29
US
Widget
Black
$2,121.58
30
China
Widget
Green
($4,839.98)
31
Italy
Widget
Black
$464.71
32
Japan
Gadget
Red
$4,993.37
33
Italy
Gadget
Green
$4,308.05
34
France
Widget
Black
($345.70)
35
US
Gadget
Red
$2,470.75
36
Korea
Widget
Red
$2,974.68
37
US
Widget
Green
$3,380.00
38
UK
Widget
Green
$4,198.18
39
Canada
Gadget
Green
$3,962.13
40
France
Gadget
Black
$4,486.36
41
US
Widget
Black
($739.31)
42
Korea
Widget
Black
($4,337.05)
43
UK
Gadget
Black
($1,054.50)
44
UK
Widget
White
$1,867.47
45
China
Gadget
Black
$2,508.62
46
German
Gadget
Red
($2,573.47)
47
Canada
Widget
White
$3,303.90
48
France
Gadget
Black
$185.33
49
Japan
Widget
Red
($4,897.56)
50
UK
Gadget
Green
$3,858.70
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> } |