FlexGrid
Right To Left
Features
Right To Left
Description
Some languages (Arabic and Hebrew especially) render content from the right to the left of the page. HTML accommodates this with the 'dir' attribute. Setting 'dir' to 'rtl' on any element causes the element's content to flow from right to left.
The FlexGrid supports this automatically. If the element hosting the grid has the 'dir' attribute set to 'rtl', the grid will render columns from the right to the left. You don't have to set any properties on the control.
Note that the 'dir' attribute value is inherited, so if you set it on the body tag for example, the entire page will be rendered from right to left, including the grid.
Note also that CSS has a 'direction' attribute that performs the same function as the 'dir' element attribute. The 'dir' attribute is generally considered more appropriate for several reasons, including the fact that the 'dir' attribute can be used in CSS rules.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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))); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> } |