FlexGrid
列の自動生成
FlexGridは、自動生成列の幅をデータ型に基づいてカスタマイズできる列の自動生成をサポートしています。
機能
サンプル
設定
次の設定は最初のグリッド専用です。2番目のグリッドは常にAutoGenerateColumnsをtrueに設定します。説明
このページは、 AutoGenerateColumns プロパティが静的プロパティ DefaultTypeWidth とどのように機能するかを示しています。
静的プロパティ DefaultTypeWidth は、 データ型に基づいて列を自動生成します。
「静的プロパティ」は、グリッドに対してこのプロパティを一度設定するだけで、その後作成されるすべてのグリッドで機能することを意味します。
CopyHeadersプロパティを使用すると、データをクリップボードにコピーするときにグリッドに行または列ヘッダーを含めるかどうかを指定できます。
SelectionMode プロパティでは、行、行範囲、連続しない行リスト、セル、セル範囲、選択なしのいずれかにユーザーの選択を制限することができます。
Visible プロパティを使用すると、行または列を表示するように設定できます。(AutoGenerateColumnsプロパティをFalseに設定します。)
LazyRender プロパティを使用して、グリッドでは、最後の描画サイクルで更新されたセルの描画をスキップするかどうかを決定する値を設定します。
ソース
AutoGenerateColumnsController.cs
using System; using System.Collections.Generic; using System.Linq; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; #if !NETCORE31 using Microsoft.AspNetCore.Http.Internal; #endif using Microsoft.Extensions.Primitives; using Microsoft.AspNetCore.Http; using C1.Web.Mvc.Grid; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private readonly ControlOptions _gridAutoGenerateColumnsOptions = new ControlOptions { Options = new OptionDictionary { {"Auto Generate Columns", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}}, {"Number Columns Width", new OptionItem {Values = new List<string> {"60", "100", "120", "150"}, CurrentValue = "120"}}, {"Date Columns Width", new OptionItem {Values = new List<string> {"60", "100", "120", "150"}, CurrentValue = "100"}}, {"String Columns Width", new OptionItem {Values = new List<string> {"60", "100", "120", "150"}, CurrentValue = "150"}}, {"Boolean Columns Width", new OptionItem {Values = new List<string> {"60", "100", "120", "150"}, CurrentValue = "60"}}, {"Selection",new OptionItem{Values = new List<string> {"None", "Cell", "CellRange", "Row", "RowRange", "ListBox", "MultiRange"},CurrentValue = "Cell"}}, {"Column Visibility",new OptionItem {Values = new List<string> {"Show", "Hide"}, CurrentValue = "Show"}}, {"Copy Header", new OptionItem {Values = new List<string> {"None", "Column", "Row", "All"}, CurrentValue = "None"}}, {"Lazy Render", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}} } }; public ActionResult AutoGenerateColumns(IFormCollection data) { _gridAutoGenerateColumnsOptions.LoadPostData(data); ViewBag.DemoOptions = _gridAutoGenerateColumnsOptions; var opts = _gridAutoGenerateColumnsOptions.Options; ViewBag.DefTypeWidth = String.Format("{0},{1},", DataType.Number, opts["Number Columns Width"].CurrentValue) + String.Format("{0},{1},", DataType.Date, opts["Date Columns Width"].CurrentValue) + String.Format("{0},{1},", DataType.String, opts["String Columns Width"].CurrentValue) + String.Format("{0},{1},", DataType.Boolean, opts["Boolean Columns Width"].CurrentValue); var model = Sale.GetData(500); return View(model); } } }
AutoGenerateColumns.cshtml
@using C1.Web.Mvc.Grid @model IEnumerable<Sale> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; string defTypeWidth = ViewBag.DefTypeWidth; } @if (optionsModel.Options["Auto Generate Columns"].CurrentValue == "False") { <c1-flex-grid id="agcFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true" sorting-type="SingleColumn" height="250px" selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))" copy-headers="@((CopyHeader)Enum.Parse(typeof(CopyHeader), optionsModel.Options["Copy Header"].CurrentValue))" lazy-render="@(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue))" default-type-width="@defTypeWidth"> <c1-flex-grid-column binding="ID" is-visible="@(string.Compare(optionsModel.Options["Column Visibility"].CurrentValue, "show", true) == 0)"></c1-flex-grid-column> <c1-flex-grid-column binding="Start" format="@("MMM d yy")"></c1-flex-grid-column> <c1-flex-grid-column binding="End" format="@("HH:mm")"></c1-flex-grid-column> <c1-flex-grid-column binding="Country" width="@("100")"></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-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> <c1-flex-grid-column binding="Rank"></c1-flex-grid-column> <c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source> </c1-flex-grid> } else { <c1-flex-grid id="agcFlexGrid" auto-generate-columns="true" class="grid" is-read-only="true" sorting-type="SingleColumn" height="250px" selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))" copy-headers="@((CopyHeader)Enum.Parse(typeof(CopyHeader), optionsModel.Options["Copy Header"].CurrentValue))" lazy-render="@(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue))" default-type-width="@defTypeWidth"> <c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source> </c1-flex-grid> } <c1-flex-grid id="agcFlexGrid1" auto-generate-columns="true" class="grid" is-read-only="true" sorting-type="SingleColumn" height="250px" selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))" copy-headers="@((CopyHeader)Enum.Parse(typeof(CopyHeader), optionsModel.Options["Copy Header"].CurrentValue))" lazy-render="@(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue))"> <c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source> </c1-flex-grid> @section Settings{ <span style="color:gray">@Html.Raw(FlexGridRes.AutoGenerateColumns_Text2)</span> @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Summary{ <p>@Html.Raw(FlexGridRes.AutoGenerateColumns_Text0)</p> } @section Description{ <p>@Html.Raw(FlexGridRes.AutoGenerateColumns_Text1)</p> <p>@Html.Raw(FlexGridRes.CopyHeaders_Text0)</p> <p>@Html.Raw(FlexGridRes.SelectionMode_Text0)</p> <p>@Html.Raw(FlexGridRes.ColumnVisibility_Text0)</p> <p>@Html.Raw(FlexGridRes.LazyRender_Text0)</p> }
マニュアル