Hello Tom,

The <GridColumn> tag exposes the TextAlign parameter. It accepts a member of the ColumnTextAlign enum with values Left, Right, and Center. This will align the text in the column cells based on the value. To align the text of the header cell, you can use the HeaderCell parameter of the Grid to cascade a custom CSS class. You can use that class to cascade the text-align class. Below, I have added an example:

<style>
    .custom-align .k-grid-header .center-text-align {
        text-align: center;
    }
</style>

@* define data, model and columns for a grid *@

@using System.ComponentModel.DataAnnotations
@* This Using is for the model class attributes only *@

<TelerikGrid Data="@MyData" Class="custom-align">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" />
        <GridColumn Field="@(nameof(SampleData.Name))" TextAlign="@ColumnTextAlign.Center" HeaderClass="center-text-align" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        });

    public class SampleData
    {
        public int Id { get; set; }
        [Display(Name = "Employee Name")]
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Regards,
Svetoslav Dimitrov
Progress Telerik

Hi John,

You can Follow a feature for the column headers here: https://feedback.telerik.com/blazor/1488753-set-css-class-to-the-header-cell-of-the-column. Whether there will be separate (static) properties for this is something I can't say yet, because it opens the door to "property hell" - there are many elements - data cells, header cells, footer cells, group footer cells, group header cells, perhaps there might be more in the future. I am not saying it's not going to happen, all I'm saying is that we don't know yet whether and how it will. Adding parameters to blazor components comes with a performance penalty, and that's something we need to look out for too.

Regards,
Marin Bratanov
Progress Telerik

Hi JL,

At the moment, this is what you can do. It is literally a few words, and it is only 2-3 words longer than having a parameter, and about the same length character-wise.

OnCellRender="@( (e) => e.Class = "left-align" )"

vs

HorizontalAlign="@HorizontalAlignEnum.Left"

Nevertheless, this request is open because we may still implement parameters for this. To know when/if that happens, click the Follow button on the page.

Regards,
Marin Bratanov
Progress Telerik

Hi all,

Since 2.18.0, the columns expose the OnCellRender event for the content cells, so you can easily add a class to set alignment. Here's a basic example:

<style>
    .k-grid td.right-align {
        text-align: right;
    }

    .k-grid td.left-align {
        text-align: left;
    }
</style>

<TelerikGrid Data="@MyData"
             Height="400px"
             Pageable="true"
             Width="750px">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" 
                    Width="120px"
                    OnCellRender="@( (e) => e.Class = "left-align" )"/>
        <GridColumn Field="@(nameof(SampleData.Name))"
                    OnCellRender="@( (e) => e.Class = "right-align" )" />
        <GridColumn Field="@(nameof(SampleData.Team))" 
                    Title="Team"
                    OnCellRender="@RepeatedCode"/>
        <GridColumn Field="@(nameof(SampleData.HireDate))" 
                    Title="Hire Date"
                    OnCellRender="@RepeatedCode"/>
    </GridColumns>
</TelerikGrid>

@code {
    void RepeatedCode(GridCellRenderEventArgs e)
    {
        e.Class = "right-align";
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

Thank you for your feedback, I appreciate it.

@PP - yes, that's what I meant

@Werner - I agree with you, I just wanted to gather some more information on how people prefer using that.

Another key reason why I asked is because parameters can cause a performance hit in Blazor, so the fewer parameters one has, the better the performance.

--Marin

Hi everyone,

Would it be more helpful if we actually had a Class parameter for the cells? This would let you add rules for alignment, but it would also let you do more things (say, make a column yellow, or different font).

--Marin

Hello,

You can already do this for the rows through templates: https://docs.telerik.com/blazor-ui/components/grid/templates.

You may want to Vote for and Follow the header templates feature: https://feedback.telerik.com/blazor/1407601-grid-column-header-title-as-template.

With templates in the headers or rows, you are able to put the desired content with the desired CSS classes and rules.

Considering that in Blazor templating is a very powerful feature, at this point I cannot say if built-in properties will become available for alignment of the text, or templates will be the way to go. Thus, I am leaving this item open so we can gather feedback (although header templates are likely to arrive sooner than properties for alignment, even if we implement them).

Regards,
Marin Bratanov
Progress Telerik