Different TextAlign on header and field

[Art Vandelay]

Have you considered having a different TextAlign property on header and row column?

Using AdaptiveUIMode, the Mobile view would look better if one could have left aligned the header content, while having right aligned numeric data

What would be recommended way to solve this as of now? Defining columns depending on the UIMode?

    <GridColumns>
        @if (isAdaptive)
        {
            <GridColumn Field="Name" HeaderText="Name" TextAlign="TextAlign.Left" />
        }
        else
        {
            <GridColumn Field="Name" HeaderText="Name" TextAlign="TextAlign.Center" />
        }
    </GridColumns>

[Guhanathan Ramanathan]

Hi Art Vandelay,

Based on your request, we have created a simple sample using media queries to meet your requirement. The adaptive layout ensures that each row’s alignment is rendered appropriately, optimizing the display for both the header and the content according to the selected adaptive layout mode.Please refer to the code snippet and sample for your reference.

  <SfMediaQuery OnBreakpointChanged="@OnBreakPointChanged" />

    @if (Gridren)

    {

        <SfGrid DataSource="@Orders" @ref=sfGrid AllowSorting="true" AllowFiltering="true"

        EnableAdaptiveUI="@IsEnableAdaptiveUI" AdaptiveUIMode="@AdaptiveUIMode"

        Height="100%" Width="100%" AllowPaging="true"

        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" RowRenderingMode="IsRendering">

            <GridFilterSettings Type="@Syncfusion.Blazor.Grids.FilterType.Excel" />

            <GridEditSettings AllowEditing="true" AllowAdding="true"></GridEditSettings>

           

            <GridColumns>

                <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="300px" TextAlign="IsTextAlign" />

                <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="300px" TextAlign="IsTextAlign" />

                <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.Date" Width="130" TextAlign="IsTextAlign" />

                <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" Width="300px" TextAlign="IsTextAlign" />

            </GridColumns>

        </SfGrid>

    }

</div>

@code {

    public List<Order>? Orders { get; set; }

    private string? activeBreakpoint { get; set; }

    public bool IsEnableAdaptiveUI { get; set; }

    private AdaptiveMode AdaptiveUIMode { get; set; }

    bool isSmallDevice = false;

    private async Task OnBreakPointChanged(BreakpointChangedEventArgs args)

    {

        if (args.ActiveBreakpoint == "Small")

        {

            IsEnableAdaptiveUI = true;

           

           

            IsTextAlign = TextAlign.Left;

            IsRendering = RowDirection.Vertical;

            Gridren = false;

            await InvokeAsync(StateHasChanged);

            Gridren = true;

            await sfGrid.HideColumnsAsync(new string[] { "CustomerID", "OrderDate" }, "field");

        }

        else

        {

            IsEnableAdaptiveUI = false;

            AdaptiveUIMode = Syncfusion.Blazor.Grids.AdaptiveMode.Desktop;

           

            IsTextAlign = TextAlign.Center;

            Gridren = false;

            await InvokeAsync(StateHasChanged);

            Gridren = true;

            //sfGrid.ShowColumnsAsync();

        }

    }

Regards,

Guhanathan R

Attachment: DataGridNet9_f67c19fa.zip