Right-To-Left

3 Aug 20213 minutes to read

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 the DropDownList component in the following code snippet.

@using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue="string" Placeholder="Select the country" TItem="Countries" DataSource="@CountryList" EnableRtl="true">
    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
</SfDropDownList>

@code {

    SfDropDownList<string, Countries> dropdownObj;

    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }
    List<Countries> CountryList = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" }
    };
}

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 Syncfusion Blazor components in an application, import Syncfusion.Blazor, inject and the SyncfusionBlazorService in your @code section and invoke EnableRtl method. In the following code snippet, the RTL support has been enabled for all Syncfusion Blazor components.

@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Grids;

<SfGrid 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="d" Type="ColumnType.Date" TextAlign="TextAlign. Right" Width="100"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></    GridColumn>
    </GridColumns>
</SfGrid>

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

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        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();

        //Set EnableRtl to all Syncfusion Blazor Components
        SyncfusionService.EnableRtl();
    }

    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