Completed
Last Updated: 22 Nov 2022 13:24 by ADMIN
Release 2.25.0
Manu
Created on: 27 Sep 2019 20:48
Category: Grid
Type: Feature Request
46
Grid column header and content alignment (horizontal +Vertical)

Grid column header and content alignment (horizontal +Vertical)

---

ADMIN EDIT

For the time being, this is possible through the CellRender event, see below in the thread for an example.

---

16 comments
ADMIN
Svetoslav Dimitrov
Posted on: 22 Nov 2022 13:24

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tom
Posted on: 15 Nov 2022 22:02
I see this feature request is marked as COMPLETED but it only has a workaround - is that right?

I keep coming across a lot of these "basic features" that I`d expect out of a box for this type of component from Telerik.
Douglas
Posted on: 05 May 2021 19:36

Just stumbled into this as cleaning up my app to present to client.  Appreciate work around but feels like work around and templating each column is powerful and event is nice too but this is just basics out of box currency and numbers are right aligned.

Followed!

Thanks

Doug

 

 

ADMIN
Marin Bratanov
Posted on: 23 Dec 2020 09:56

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

John Campion
Posted on: 22 Dec 2020 20:27
Could we perhaps just get a CssClass property on a grid column?  That might let us use CSS to get specific formatting on a column without needing events?   
JL
Posted on: 14 Dec 2020 08:11

Hi Marin,

Thanks for your reply. What I was meaning is to raise an event for just setting a property is over-killed to me. Browser has to manage the event. If you are with an device with not so many resources, like a smartphone, maybe this is not a good solution.

Nevertheless, I have a Template for a money column. Raising the render event is not working in this case and you need to use the other solution you gave in another place: to use a class, https://www.telerik.com/forums/how-do-i-right-align-a-gridcolumn-content

So the way to align columns is not working coherently, and you have to use one solution if you do not have a template, and another one if you are using a template.

Regards.

 

PS. Lack of an align property took me around an hour to find out a solution.

ADMIN
Marin Bratanov
Posted on: 10 Dec 2020 19:05

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

JL
Posted on: 10 Dec 2020 14:55

Hello,

I'm surprised to use an event for just aligning column contents, kind of over-killed! It is great if you want to do an special formatting to a column, if you want it in some colour or if you want it with bold or cursive font or different font face, etc.

Text alignment should be out of the box. If you have numbers, you will want to have them right aligned. If you have text, left aligned. If you have something like a boolean check box you will want it centred, and so on.

My vote goes to have a property for aligning texts out of the box, cause this is a very intensive use case.

Regards,

ADMIN
Marin Bratanov
Posted on: 09 Nov 2020 12:36

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

PP
Posted on: 18 Feb 2020 14:37
I agree with Werner, horizontal alignment and formatting are a must for grids in any business application.
ADMIN
Marin Bratanov
Posted on: 18 Feb 2020 13:03

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

Werner
Posted on: 18 Feb 2020 12:53

* At least horizontal alignment and standard formatting is something you will need in almost every grid on some solumns - therefore it should be supported directly to allow rapid, easy to read and maintain software development without having to write much code

* a class attribute is a good idea, too ;-) but that's something allowing to treat almost any rare special requirements, but you will have to bother with css having the corresponding disadvantages (or advantages)

Class attribute can also be used for workarounds to features not yet available as attribute - but some features which are frequently required when using a grid (format, horizontal alignment, ...) makes software engineering more effective, code easy to read and you do not have to bother with CSS.

Separate attributes force small, easy to read, easy to maintain code covering standard functionality.

 

 

 

PP
Posted on: 18 Feb 2020 12:41
Sure that's a possibility, although it might make it more complicated to set for some people who are not used to working with CSS (if I understood correctly your suggestion, Marin)
ADMIN
Marin Bratanov
Posted on: 18 Feb 2020 12:23

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

PP
Posted on: 18 Feb 2020 10:43

+1, especially the content alignment would be useful, out of the box. I would imagine something like this:

 

<GridColumn Field=@nameof(MyModel.Number) Title="My number" HorizontalAlignment = "right" VerticalAlignment = "center"/>

 

Thank you

ADMIN
Marin Bratanov
Posted on: 30 Sep 2019 08:47

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

 UI for Blazor