TabOrder
Customer Order | Customer Sale | |
---|---|---|
Country* | ||
Product* | ||
Price* | ||
Date |
ID
OrderTime
Country
Product
Price
ID
OrderTime
Country
Product
Price
1
2014/01/03
US
Wii U
¥208
2
2014/01/04
UK
PlayStation 3
¥281
3
2014/01/04
Canada
PlayStation 4
¥386
4
2014/01/04
Japan
PlayStation Vita
¥450
5
2014/01/04
China
PlayStation 3
¥370
6
2014/01/04
France
PlayStation Vita
¥457
7
2014/01/05
German
PlayStation 4
¥356
8
2014/01/05
Italy
PlayStation 3
¥291
9
2014/01/05
Korea
PlayStation Vita
¥139
10
2014/01/05
Australia
PlayStation Vita
¥461
0
ID
Start
Country
Product
Amount
ID
Start
Country
Product
Amount
1
2025/01/25
France
Widget
¥878
2
2025/02/25
Korea
Widget
-¥3,788
3
2025/03/25
German
Gadget
-¥2,447
4
2025/04/25
German
Widget
-¥4,375
5
2025/05/25
Japan
Gadget
¥1,089
6
2025/06/25
China
Gadget
¥1,342
7
2025/07/25
US
Widget
¥3,596
8
2025/08/25
China
Widget
¥3,232
9
2025/09/25
France
Gadget
-¥2,009
10
2025/10/25
France
Gadget
¥2,568
0
設定
説明
このサンプルは、コントロールにTabOrderを使用する方法を示します。デフォルト設定では、コントロールにTabOrderプロパティが表示されません。カスタマイズ設定は、各コントロールのTabOrderプロパティを指定します。タブオーダーは、コード内のインタラクティブ要素の順序に従わずに、コンテンツ内の関係に従います。
TabIndex属性値は、コントロールのホストHTML要素で指定することで、Wijmoコントロールに対して静的に定義できます。ただし、Wijmoコントロールは複雑な構造であり、コントロールが正しく機能できるように、属性値を内部要素に伝達する必要があるため、この値をアプリケーションのライフサイクルの後半で変更することはできません。
そのため、コントロールのtabindexを動的に読み取ったり変更したりするには、TabOrderプロパティを使用して行う必要があります。
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 | using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class TabOrderController : Controller { private readonly ControlOptions _optionModel = new ControlOptions { Options = new OptionDictionary { { "Tab Order" , new OptionItem{ Values = new List< string > { "Default" , "Customized" }, CurrentValue = "Default" }} } }; public ActionResult Index(FormCollection collection) { IValueProvider data = collection; _optionModel.LoadPostData(data); ViewBag.DemoOptions = _optionModel; 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 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 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 | @ { ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true ; string tabOrder = optionsModel.Options[ "Tab Order" ].CurrentValue; } < div class = "container-fluid" > < div class = "row" > < div class = "col-md-7 col-md-offset-2" style = "text-align: center; max-width: 660px;" > @if (tabOrder == "Customized" ) { < table class = "input-form" > < tr > < th ></ th > < th >Customer Order</ th > < th >Customer Sale</ th > </ tr > < tr > < th >Country*</ th > < td > @Html .C1().ComboBox().Id( "orderCountry" ).Bind(Countries.GetCountries()).TabOrder(1).IsRequired( true )</ td > < td > @Html .C1().ComboBox().Id( "saleCountry" ).Bind(Countries.GetCountries()).TabOrder(5).IsRequired( true )</ td > </ tr > < tr > < th >Product*</ th > < td > @Html .C1().ComboBox().Id( "orderProduct" ).Bind(Products.GetProducts()).TabOrder(2).IsRequired( true )</ td > < td > @Html .C1().ComboBox().Id( "saleProduct" ).Bind(Products.GetProducts()).TabOrder(6).IsRequired( true )</ td > </ tr > < tr > < th >Price*</ th > < td > @Html .C1().InputNumber().Id( "orderPrice" ).Min(0).Step(1).Value(0).Format( "c0" ).IsRequired( true ).TabOrder(3)</ td > < td > @Html .C1().InputNumber().Id( "salePrice" ).Min(0).Step(1).Value(0).Format( "c0" ).IsRequired( true ).TabOrder(7)</ td > </ tr > < tr > < th >Date</ th > < td > @Html .C1().InputDate().Id( "orderDate" ).Value(DateTime.Today).IsRequired( false ).TabOrder(4)</ td > < td > @Html .C1().InputDate().Id( "saleDate" ).Value(DateTime.Today).IsRequired( false ).TabOrder(8)</ td > </ tr > </ table > } else { < table class = "input-form" > < thead > < tr > < th ></ th > < th >Customer Order</ th > < th >Customer Sale</ th > </ tr > </ thead > < tbody > < tr > < th >Country*</ th > < td > @Html .C1().ComboBox().Id( "orderCountry" ).Bind(Countries.GetCountries()).IsRequired( true )</ td > < td > @Html .C1().ComboBox().Id( "saleCountry" ).Bind(Countries.GetCountries()).IsRequired( true )</ td > </ tr > < tr > < th >Product*</ th > < td > @Html .C1().ComboBox().Id( "orderProduct" ).Bind(Products.GetProducts()).IsRequired( true )</ td > < td > @Html .C1().ComboBox().Id( "saleProduct" ).Bind(Products.GetProducts()).IsRequired( true )</ td > </ tr > < tr > < th >Price*</ th > < td > @Html .C1().InputNumber().Id( "orderPrice" ).Min(0).Step(1).Value(0).Format( "c0" ).IsRequired( true )</ td > < td > @Html .C1().InputNumber().Id( "salePrice" ).Min(0).Step(1).Value(0).Format( "c0" ).IsRequired( true )</ td > </ tr > < tr > < th >Date</ th > < td > @Html .C1().InputDate().Id( "orderDate" ).Value(DateTime.Today).IsRequired( false )</ td > < td > @Html .C1().InputDate().Id( "saleDate" ).Value(DateTime.Today).IsRequired( false )</ td > </ tr > </ tbody > </ table > } < br /> < button id = "add-row" class = "btn btn-primary col-sm-offset-2" > < b >< i class = "glyphicon-plus" ></ i > Add Data</ b > </ button > < br /> </ div > < br /> < br /> < div class = "col-md-12" > < div class = "col-md-6" > < label >Customer order</ label > @ (Html.C1().FlexGrid< CustomerOrder >() .AutoGenerateColumns( false ) .Id( "order" ).Height( "200px" ) .CssClass( "grid" ).IsReadOnly( true ) .AllowAddNew( true ) .Bind(b => b.Bind(CustomerOrder.GetCountryGroupOrderData()).DisableServerRead( true )) .Columns(bl => { bl.Add(cb => cb.Binding( "ID" ).Width( "40" )); bl.Add(cb => cb.Binding( "OrderTime" ).Width( "100" )); bl.Add(cb => cb.Binding( "Country" ).Width( "100" ) .DataMap(dm => dm.DisplayMemberPath( "Name" ) .SelectedValuePath( "Name" ) .SortByDisplayValues( true ))); bl.Add(cb => cb.Binding( "Product" ).Width( "100" ) .DataMap(dm => dm.DisplayMemberPath( "Name" ) .SelectedValuePath( "Name" ) .SortByDisplayValues( true ))); bl.Add(cb => cb.Binding( "Price" ).Format( "c" ).Width( "100" )); }) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row).TabOrder(0) ) </ div > < div class = "col-md-6" > < label >Customer Sale</ label > @ (Html.C1().FlexGrid< Sale >() .AutoGenerateColumns( false ) .Id( "sale" ).Height( "200px" ) .CssClass( "grid" ).IsReadOnly( true ) .AllowAddNew( true ) .Bind(b => b.Bind(CustomerSale.GetData(10)).DisableServerRead( true )) .Columns(bl => { bl.Add(cb => cb.Binding( "ID" ).Width( "40" )); bl.Add(cb => cb.Binding( "Start" ).Width( "100" )); bl.Add(cb => cb.Binding( "Country" ).Width( "100" ) .DataMap(dm => dm.DisplayMemberPath( "Name" ) .SelectedValuePath( "Name" ) .SortByDisplayValues( true ) .Bind(FullCountry.GetCountries()))); bl.Add(cb => cb.Binding( "Product" ).Width( "100" ) .DataMap(dm => dm.DisplayMemberPath( "Name" ) .SelectedValuePath( "Id" ) .SortByDisplayValues( true ) .Bind(CustomerSale.PRODUCTS))); bl.Add(cb => cb.Binding( "Amount" ).Format( "c" ).Width( "100" )); }) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row).TabOrder(0) ) </ div > </ div > </ div > </ div > @section Styles{ < style > .input-form td, th { padding: 0.5rem; } .input-form .wj-template{ width:240px; } </ style > } @section Scripts{ <script> c1.documentReady( function () { let cOrderGrid = wijmo.Control.getControl( "#order" ) let orderCountry = wijmo.Control.getControl( "#orderCountry" ); let orderProduct = wijmo.Control.getControl( "#orderProduct" ); let orderPrice = wijmo.Control.getControl( "#orderPrice" ); let orderDate = wijmo.Control.getControl( "#orderDate" ); let cSaleGrid = wijmo.Control.getControl( "#sale" ); let saleCountry = wijmo.Control.getControl( "#saleCountry" ); let saleProduct = wijmo.Control.getControl( "#saleProduct" ); let salePrice = wijmo.Control.getControl( "#salePrice" ); let saleDate = wijmo.Control.getControl( "#saleDate" ); document.getElementById( 'add-row' ).addEventListener( 'click' , function (e) { //add new row to Order grid cOrderGrid.focus(); let oview = cOrderGrid.editableCollectionView; let onewItem = oview.addNew(); onewItem.ID = oview.items.length; onewItem.OrderTime = orderDate.value; onewItem.Country = orderCountry.selectedValue; onewItem.Product = orderProduct.selectedValue; onewItem.Price = orderPrice.value; oview.commitNew(); //add new row to Sale grid cSaleGrid.focus(); let sview = cSaleGrid.editableCollectionView; let snewItem = sview.addNew(); snewItem.ID = sview.items.length; snewItem.Start = saleDate.value; snewItem.Country = saleCountry.selectedValue; snewItem.Product = saleProduct.selectedValue; snewItem.Amount = salePrice.value; sview.commitNew(); e.preventDefault(); // don't submit the form }); }) </script> } @section Settings{ @Html .Partial( "_OptionsMenu" , optionsModel) } @section Summary{ < p > @Html .Raw(Resources.TabOrder.TabOrder_Text0)</ p > } @section Description{ < p > @Html .Raw(Resources.TabOrder.TabOrder_Description_Text0)</ p > < p > @Html .Raw(Resources.TabOrder.TabOrder_Description_Text1)</ p > < p > @Html .Raw(Resources.TabOrder.TabOrder_Description_Text2)</ p > } |