FlexGrid
チェックボックスの選択
Selector クラスを使用すると、チェックボックスで行を選択することができます。
機能
サンプル
設定
説明
Selector クラスを使用して、チェックボックスで行を選択できます。これは、通常は拡張選択を作成するために使用されるShiftキーとCtrlキーを持たないモバイルデバイスで最適に機能します。
Selector クラスは、行ヘッダー列および通常のスクロール可能なデータ列で使用できます。
Selector クラスは、フラットビューおよび階層ビューで機能します。階層ビューで使用すると、ユーザーはグループ全体の選択状態を一度に切り替えることができます。
The Selector can be set AriaLabel to support screen reader.
ソース
CheckboxSelectionController.cs
using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; using MvcExplorer.Models; using System.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // // GET: /CheckboxSelection/ public ActionResult CheckboxSelection() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"CheckboxColumn", new object[]{"Header", "OrderID", "ShipCountry", "ShipCity"}}, {"ShowCheckAll", new object[]{"True", "False"}} } }; return View(); } public ActionResult CheckboxSelection_Bind([C1JsonRequest] CollectionViewRequest<Order> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, _db.Orders.Take(100).ToList())); } } }
CheckboxSelection.cshtml
@model IEnumerable<Order> @{ ViewBag.DemoSettings = true; var controlId = (ViewBag.DemoSettingsModel as ClientSettingsModel).ControlId; } <c1-flex-grid id="@controlId" height="500px" is-read-only="true" auto-generate-columns="false" sorting-type="None" group-by="ShipCountry,ShipCity" show-groups="true"> <c1-items-source read-action-url="@Url.Action("CheckboxSelection_Bind")"></c1-items-source> <c1-flex-grid-column binding="OrderID" header="Id"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipCountry" header="Ship Country"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipCity" header="Ship City"></c1-flex-grid-column> <c1-flex-grid-column binding="ShippedDate" header="Shipped Date"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipAddress" header="Ship Address" width="*"></c1-flex-grid-column> <c1-flex-grid-column binding="Freight" header="Freight" format="c2" aggregate="Sum"></c1-flex-grid-column> <c1-flex-grid-selector show-check-all="true" aria-label="Select the row here."></c1-flex-grid-selector> </c1-flex-grid> @section Scripts{ <script> function customChangeCheckboxColumn(grid, name) { let selector = c1.getExtenders(grid, wijmo.grid.selector.Selector)[0]; if (name == "Header") { selector.column = grid; } else { selector.column = grid.getColumn(name); } grid.endUpdate(); } function customChangeShowCheckAll(grid, value) { let selector = c1.getExtenders(grid, wijmo.grid.selector.Selector)[0]; selector.showCheckAll = value == "False" ? false : true; grid.endUpdate(); } </script> } @section Summary{ @Html.Raw(FlexGridRes.CheckboxSelection_Text0) } @section Description{ <p>@Html.Raw(FlexGridRes.CheckboxSelection_Text1)</p> <p>@Html.Raw(FlexGridRes.CheckboxSelection_Text2)</p> <br /> }
マニュアル