FlexGrid
右から左
機能
サンプル
左から右へ
説明
一部の言語（特にアラビア語とヘブライ語）は、 ページの右から左にコンテンツをレンダリングします。HTML は、「dir」属性を使用してこれに適応しています。 任意の要素で「dir」を「rtl」に設定すると、 要素のコンテンツは右から左に流れます。
FlexGrid は、これを自動的にサポートします。グリッドをホストする要素で 「dir」属性を「rtl」に設定すると、 列は右から左にレンダリングされます。コントロールのプロパティを設定する必要はありません。
「dir」属性値は継承されるので、たとえば、 body タグでこれを設定すると、グリッドを含むページ全体が 右から左にレンダリングされます。
また、CSS には、「dir」要素属性と同じ機能を実行する 「direction」属性があります。原則として「dir」属性の方が適切であると 考えられます。これには、 CSS ルールで使用できるなど、いくつかの理由が あります。
ソース
RightToLeftController.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
{
//
// GET: /RTL/
public ActionResult RightToLeft()
{
return View();
}
public ActionResult RightToLeft_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
{
return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(500)));
}
}
}
RightToLeft.cshtml
<h3>
@Html.Raw(FlexGridRes.RightToLeft_RightToLeft)
</h3>
<c1-flex-grid auto-generate-columns="false" is-read-only="true" class="grid"
dir="rtl">
<c1-items-source read-action-url="@Url.Action("RightToLeft_Bind")"></c1-items-source>
<c1-flex-grid-column binding="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start"></c1-flex-grid-column>
<c1-flex-grid-column binding="End"></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="Active"></c1-flex-grid-column>
</c1-flex-grid>
@section Description{
<p>@Html.Raw(FlexGridRes.RightToLeft_Text0)</p>
<p>@Html.Raw(FlexGridRes.RightToLeft_Text1)</p>
<p>@Html.Raw(FlexGridRes.RightToLeft_Text2)</p>
<p>@Html.Raw(FlexGridRes.RightToLeft_Text3)</p>
}
マニュアル