How to set vertical alignment for a GridColumn

[Joshua]

Hi,

Please could you advise how I can vertically align the cell to the top as it defaults to the centre - as an example by Grid is defined as follows:

                                    <SfGrid DataSource="@claimJournalSummaries" class="col-md-12 table" AllowSorting="true" AllowTextWrap="true" AllowPaging="true">

                                        <GridPageSettings PageCount="5" PageSize="50"></GridPageSettings>

                                        <GridTextWrapSettings WrapMode="Syncfusion.Blazor.Grids.WrapMode.Content"></GridTextWrapSettings>

                                        <GridColumns>

                                            <GridColumn Field=@nameof(ClaimJournalSummary.EntryDateTime) HeaderText="Date" Format="dd/MM/yyyy HH:mm" AutoFit="true"></GridColumn>

                                            <GridColumn HeaderText="Entry By" AutoFit="true">

                                                <Template Context="templateContext">

                                                    @{

                                                        var claimJournalSummary = (templateContext as ClaimJournalSummary);

                                                        <div style="white-space:pre-wrap;">@claimJournalSummary.DaylightUserAndCompanyName</div>

                                                    }

                                                </Template>

                                            </GridColumn>

                                            <GridColumn HeaderText="Journal">

                                                <Template Context="templateContext">

                                                    @{

                                                        var claimJournalSummary = (templateContext as ClaimJournalSummary);

                                                        <div style="white-space:pre-wrap;">@claimJournalSummary.Journal</div>

                                                    }

                                                </Template>

                                            </GridColumn>

                                        </GridColumns>

                                    </SfGrid>

[Sarveswaran Palani]

Hi Joshua,

Greetings from Syncfusion support.

From your query, we suspect that you want to align text at top of the cell. We suggest you to use CustomAttributes property to customize the grid column style based on your requirement. Here we use vertical-align CSS property to overcome the reported issue at our end. We have attached code snippet, sample and UG documentation for your reference.

<GridColumns>

     <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" IsPrimaryKey="true" Width="120"></GridColumn>

</GridColumns>

<style>

    .e-rowcell.e-attr {

        text-align: left;

        vertical-align: text-top;

    }

</style>

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

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

If we misunderstood your query, please get back to us with more details about your requirement.

Regards,
Sarvesh