Search results

Right-To-Left

The right-to-left (RTL) support can be enabled for Syncfusion Blazor components by setting EnableRtl to true. This will render all the Syncfusion Blazor components in the right-to-left direction.

Enable RTL to individual component

To control a component’s direction, set the component’s EnableRtl property to true directly. For illustration, the RTL support has been enabled for DropDownList component in the following code snippet.

@using Syncfusion.EJ2.Blazor.DropDowns

<EjsDropDownList TValue="string" Placeholder="Select a game" DataSource="@GameList" EnableRtl="true">
    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</EjsDropDownList>

@code {
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> GameList = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
  };
}

After the successful compilation, press F5 to run the application.

The following screenshot illustrates the output.

Blazor component is rendered from the right-to-left

Enable RTL for all components

To control the direction of all the components in an application, import Micsoft.JSInterop, inject IJSRuntime in your @code, and use the Base method. In the following code snippet, the RTL support has been enabled for all the components.

@using Microsoft.JSInterop
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true" EnablePersistence="true">
    <GridPageSettings PageSize="8"></GridPageSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="100"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="date" TextAlign="TextAlign.Right" Width="100"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    [Inject]
    IJSRuntime JsRuntime { get; set; }
    public List<Order> Orders { get; set; }

    protected override void OnAfterRender()
    {
        //Set EnableRtl to all Syncfusion Blazor Components
        this.JsRuntime.Ejs().EnableRtl(true);
    }

    protected override void OnInit()
    {
        Orders = Enumerable.Range(1, 25).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

Blazor Grid component is rendered from the right to left