How do I right-align a GridColumn content?

[SL]

How do I right-align grid column values? I tried the Template with a span but it does not seem to work and it also adds another element.

 

This does not work:

                <GridColumn Field="Amount">
                    <Template>
                        <span style="text-align:right">
                            @((context as BO).Amount.ToString("C"))
                        </span>
                    </Template>
                </GridColumn>

 

Thanks.

 

Joel

 

[Marin Bratanov]

Hi,

EDIT: There is a better (easier) approach described in a later comment.

A span is an inline element and is as wide as its content, you'd need a block element that is as wide as its container (the cell) so you can move the contents inside it.

Here's an example I made for you and at the end of this post is a screenshot of the result I get from it

 

<TelerikGrid Data="@MyData" Height="500px">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name">
            <Template>
                <div style="text-align: right;">
                    @((context as SampleData).Name)
                </div>
            </Template>
        </GridColumn>
        <GridColumn Field="HireDate" Title="Hire Date - Default string">
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        ID = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });
}

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor

[Bill]

So if we have a grid with 26 colums, one for each hour of the day, then I need to add a Template to each of the 26 GridColumns?

[Marin Bratanov]

Hi Bill,

With versions prior to 2.18.0 - yes. With 2.18.0 and later - no, you could set the class on the cell through the CellRender event of the column. You may also want to Vote for and Follow this feature request in case this does not fit your preferences.

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

[murat]

Hi Marin,

Alignment is the key property for grid columns (web or desktop applicaion)
If I'm not wrong kendo javascript also does not has this property.

I apologise for this question but
Why don't you add a simple property for this?
Really, really I wonder what's the point of it.

Best regards.

[Marin Bratanov]

You can Follow the implementation of such a built-in feature for that here https://feedback.telerik.com/blazor/1431848-grid-column-header-and-content-alignment-horizontal-vertical

The problem with that is adding more and more parameters adds a performance hit in Blazor, and opens the door for a heavy bloated API for things that are easily done with CSS (e.g., through the CellRender, or RowRender events, or through an upcoming static Class parameter for the column). Nevertheless, this is something that is underway already.

[Leland]

For those seeing this old question, there is now a simple property on the GridColumn component that can handle this:

TextAlign="ColumnTextAlign.Right"

See more info at the following link:
https://docs.telerik.com/blazor-ui/components/grid/columns/bound#appearance

[Andrew]

Can this be applied to GridCommandColumn buttons?

[Dimo]

@Andrew - the GridCommandColumn is practically a template column where you define the content as a RenderFragment. It has no TextAlign parameter, but you can apply text alignment with suitable HTML and CSS, depending on the exact scenario and column content.

[Andrew]

Isn't the whole point of using these controls is to make life easier for devs? if I have to spend time messing around with custom html and css - what's the point of the control?  Maybe you could point me to somewhere in your docs where I can find an example?

[Dimo]

@Andrew - the management and styling of template content normally depends on the app. Usually the required approach is generic and would be the same if you are not using our components. We do not provide component parameters that are inherently designed to integrate with arbitrary custom content, because there is no guarantee that they will work.

<TelerikGrid Data="@GridData">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)"
                    Title="Right TextAlign Not Working in Template"
                    TextAlign="@ColumnTextAlign.Right">
            <Template>
                @{ var dataItem = (Product)context; }
                <div style="display:flex;gap:.5em;">
                    <div>@dataItem.Name</div>
                    <div>@dataItem.Name</div>
                </div>
            </Template>
        </GridColumn>
        <GridCommandColumn Title="OnCellRender"
                           OnCellRender="@OnGridCellRender">
            <TelerikButton>Right</TelerikButton>
        </GridCommandColumn>
        <GridCommandColumn Title="DIV">
            <div class="ra">
                <TelerikButton>Right</TelerikButton>
            </div>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

<style>
    .ra,
    .k-grid .k-table-td.ra {
        text-align: right;
    }
</style>

@code {
    private List<Product> GridData { get; set; } = new() { new() };

    private void OnGridCellRender(GridCellRenderEventArgs args)
    {
        args.Class = "ra";
    }

    public class Product
    {
        public string Name { get; set; } = "Default Name";
    }
}