Adaptive Grid Rendering problem

[Sotiris]

Hi,

I have enabled the AdaptiveUI and set the  RowRenderingMode to "RowDirection.Vertical" , with AdaptiveUIMode="AdaptiveMode.Mobile". 

The issue I am facing, as you can see in the attached image in the columns "OK" and "Newsletter", is that when I set the TextAlign="TextAlign.Center" property in the grid columns (for proper display in desktop mode) the header label is also displayed centered in Adaptive mode (mobile), despite the fact that the rest of the columns, which their headers are centered also, are displayed properly with left alignment.

Best Regards, 
Sotiris

Here is my Grid:

<SfGrid ID="Grid" @ref="UsersGrid" DataSource="@Users"

        Height="500" EnableVirtualization="true"

        EnableAdaptiveUI="true" RowRenderingMode="RowDirection.Vertical" AdaptiveUIMode="AdaptiveMode.Mobile"

        AllowSelection="true" AllowSorting="true" AllowFiltering="true"

        Toolbar="@(new List<string>() { "ExcelExport" })" AllowExcelExport="true">

    <GridFilterSettings Type="@FilterType.Menu"></GridFilterSettings>

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

    <GridEvents TValue="UsersListingDto"

                OnActionBegin="ActionBegin"

                OnActionComplete="ActionComplete"

                OnToolbarClick="ToolbarClickHandler" />

    <GridColumns>

        <GridColumn Field=@nameof(UsersListingDto.CVID) HeaderText="" TextAlign="TextAlign.Center" Visible="false">

        </GridColumn>

        <GridColumn Field=@nameof(UsersListingDto.LastName) HeaderText="Last Name" HeaderTextAlign="TextAlign.Center"

                    TextAlign="TextAlign.Left">

            <Template>

                @{

                    var user = (context as UsersListingDto);

                    @if (ViewMode?.ToLower() == "deleted")

                    {

                        <span class="text-danger">@user?.LastName</span>

                    }

                    else

                    {

                        <a rel='nofollow' href="@user?.ViewUrl" target="_blank">

                            @user?.LastName

                        </a>

                    }

                }

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(UsersListingDto.FirstName) HeaderText="First Name" HeaderTextAlign="TextAlign.Center"

                    TextAlign="TextAlign.Left" />

        <GridColumn Field=@nameof(UsersListingDto.Email) HeaderText="Email" HeaderTextAlign="TextAlign.Center"

                    TextAlign="TextAlign.Left" />

        <GridColumn Field=@nameof(UsersListingDto.ProfileOk) HeaderText="OK" HeaderTextAlign="TextAlign.Center"

                    TextAlign="TextAlign.Center">

            <Template>

                @{

                    var user = (context as UsersListingDto);

                    if (user?.ProfileOk == "ΟΧΙ")

                    {

                        <span class="text-danger">ΟΧΙ</span>

                    }

                    else

                    {

                        <span class="text-success">@user?.ProfileOk</span>

                    }

                }

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(UsersListingDto.ReceiveNewsletter) HeaderText="Newsletter" HeaderTextAlign="TextAlign.Center"

                    TextAlign="TextAlign.Center"

                    DisplayAsCheckBox="true" />

        <GridColumn Field=@nameof(UsersListingDto.RegistrationDate) HeaderText="Registration" HeaderTextAlign="TextAlign.Center"

                    TextAlign="TextAlign.Left"

                    Format="dd/MM/yyyy" />

        <GridColumn Field=@nameof(UsersListingDto.LastLogin) HeaderText="Last Login" HeaderTextAlign="TextAlign.Center"

                    TextAlign="TextAlign.Left"

                    Format="dd/MM/yyyy HH:mm" />

        <GridColumn HeaderText="Delete" AutoFit="true" Visible="@(ViewMode.ToLower() != "deleted")">

            <GridCommandColumns>

                <GridCommandColumn Type="CommandButtonType.Delete"

                                   ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat text-danger" })">

                </GridCommandColumn>

            </GridCommandColumns>

        </GridColumn>

    </GridColumns>

    <GridTemplates>

        <EmptyRecordTemplate>

            <span>No records found</span>

        </EmptyRecordTemplate>

    </GridTemplates>

</SfGrid>

Attachment: sync_responsive_grid_913efa51.rar

[Prathap Senthil]

Hi Sotiris,

We would like to clarify that if you are using the Row Rendering mode 'vertical,' the grid will be displayed based on the row element. So, if the TextAlign property is set to center in the GridColumn, the header label will also be displayed centered. This is the default behavior of the grid.

Regards,
Prathap S

[Jacek Czapla]

It's quite ugly solution but you can define 2 columns for the same property with HideAtMedia min-with and max-with and different text align. 

<GridColumn Field=@nameof(UsersListingDto.ReceiveNewsletter) HeaderText="Newsletter" HeaderTextAlign="TextAlign.Left"
                    TextAlign="TextAlign.Left"
                    DisplayAsCheckBox="true" 
HideAtMedia="(min-width: 768px)"
/>
<GridColumn Field=@nameof(UsersListingDto.ReceiveNewsletter) HeaderText="Newsletter" HeaderTextAlign="TextAlign.Left"
                    TextAlign="TextAlign.Center"
                    DisplayAsCheckBox="true" 
HideAtMedia="(max-width: 768px)"
/>

[Sotiris]

Thanks for your replies!

Jacek , it is ugly as hell but it works great

[Prathap Senthil]

We recommend using the following CSS customization to meet your requirements. Please refer to the code snippet and sample below for your reference.

<style>

    .e-bigger.e-grid.e-row-responsive .e-gridcontent td::before{

        text-align: left;

    }

</style>

 

Sample Link: https://blazorplayground.syncfusion.com/embed/hZhANOsIAfSeeCjP?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Jacek Czapla]

Nice, but it's change align for all columns in grid, right?

Is it possible to set header align left and content align center in mobile view?

Does grid columns define their own css classes based on columns names? It would help customize grid layout in css.

[Monisha Saravanan]

Hi Jacek,

You can customize the appearance of the header and content of a particular column using the CustomAttributes property. Kindly check the  below attached documentation for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/how-to/customize-column-styles

Please let us know if you have further queries.