FlexGrid
スターサイズ
機能
サンプル
例 1：
このグリッドには 4 つの列があります。最初の列は 80 ピクセルの幅で、 40 ピクセルから 160 ピクセルの間でサイズ変更できます。他の 3 つの列は、2*、*、および * の幅を持ち、マウスを使用して サイズ変更することはできません。
2 番目の列は、3 番目の列と 4 番目の列の 2 倍の幅があり、 この比率は、最初の列やグリッド全体をサイズ変更しても維持されます。
例 2：
このグリッドは、有効なスペース全体に列を引き伸ばす方法を示します。このような場合は、 2 番目の列の幅を * に設定してその効果を実現します。
また、2 番目の列の最小幅を 100 ピクセルに設定して、 グリッドの他の列がサイズ変更されたときに狭くなり過ぎるのを避け、 ユーザーがこの列をマウスでサイズ変更できないようにします。
例 3：
この例は、すべての幅を * に設定します。つまり、有効なスペースが均等に分割されます。 ブラウザをサイズ変更して、グリッドがサイズ変更されることと、グリッドが列の間で均等に分配されることを確認してください。
また、他の例とは異なり、この例は個々の列ではなくグリッド全体の allowResizing プロパティを 設定します。ここでは None に設定しますが、Columns、Rows、または Both を選択することもできます。
説明
このサンプルは、XAML スタイルのスターサイズを使用して
FlexGrid に柔軟なレイアウトを実装できることを示します。スターサイズは、オブジェクトの width プロパティで指定します。
ソース
StarSizingController.cs
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
public ActionResult StarSizing()
{
return View();
}
public ActionResult StarSizing_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
{
return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(50)));
}
}
}
StarSizing.cshtml
@model IEnumerable<Sale>
<h4>
@Html.Raw(FlexGridRes.StarSizing_Example1)</h4>
<p>@Html.Raw(FlexGridRes.StarSizing_Text0)</p>
<p>@Html.Raw(FlexGridRes.StarSizing_Text1)</p>
<c1-flex-grid class="grid" auto-generate-columns="false" is-read-only="true">
<c1-flex-grid-column binding="Start" width="80" max-width="160" min-width="40"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product" width="2*" allow-resizing="false"></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-items-source read-action-url="@Url.Action("StarSizing_Bind")"></c1-items-source>
</c1-flex-grid>
<br />
<br />
<h4>
@Html.Raw(FlexGridRes.StarSizing_Example2)</h4>
<p>@Html.Raw(FlexGridRes.StarSizing_Text2)</p>
<p>@Html.Raw(FlexGridRes.StarSizing_Text3)</p>
<c1-flex-grid auto-generate-columns="false" class="grid" is-read-only="true">
<c1-flex-grid-column binding="Start" width="80"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product" width="*" min-width="100" allow-resizing="false"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c" width="120"></c1-flex-grid-column>
<c1-items-source read-action-url="@Url.Action("StarSizing_Bind")"></c1-items-source>
</c1-flex-grid>
<br />
<br />
<h4>
@Html.Raw(FlexGridRes.StarSizing_Example3)</h4>
<p>@Html.Raw(FlexGridRes.StarSizing_Text4)</p>
<p>@Html.Raw(FlexGridRes.StarSizing_Text5)</p>
<c1-flex-grid auto-generate-columns="false" class="grid" is-read-only="true">
<c1-flex-grid-column binding="Start" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product" width="*" min-width="100"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="c" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount2" format="c" width="*"></c1-flex-grid-column>
<c1-items-source read-action-url="@Url.Action("StarSizing_Bind")"></c1-items-source>
</c1-flex-grid>
@section Description{
@Html.Raw(FlexGridRes.StarSizing_Text6)
}
マニュアル