Alignment and width of a Grid Cell

[mvbaffa]

Hi, 

How can I align, center and define the width of a grid cell

Thanks in advance

[mvbaffa]

I have found it.

Just include a <div align=center>your data</div> in the template of the cell.

Thanks anyway

[Dimo]

Hello Marcus,

align="center" is an obsolete and not standard-compliant approach. I recommend you to define column widths via the KendoGrid configuration and use the text-align CSS property. No additional <div>s are required.

Greetings,
Dimo
the Telerik team

[Gema]

Hi Dimo, 

do you have an example of "kendo-way" to align data in a kendo grid cell ? Thank you,

Best regards,
Gema Pratama

[Dimo]

Hi Gema,

Content in the Kendo Grid is aligned in exactly the same way as in an ordinary <table> - by using the text-align CSS property. If you want to apply alignment to a given column only, you should use Javascript and iterate through all cells from this column (you can use cellIndex), after the Grid has been databound.

Regards,
Dimo
the Telerik team

[Igor]

Hi Dimo,

I don't think that using Javascript and iterating through all cells in a column is professional. I need a simple way to right-align all my columns that have numbers as values. If I change the order (or the number) of the columns, I would have to change the Javascript code.

I would appreciate a code sample and an info if there will be a bult-in feature for aligning text using configuration in future.

Thanks,

Igor

[Gema]

Hi Dimo,

Yes, i agree with Igor. I think there should be a simple way, an api function to do that. Other than that, this is a great framework. i really love it and can;t wait for further enhancement/development. 

Regards,
Gema Pratama

[Dimo]

Hello all,

The problem is that currently the Grid does not preserve HTML attributes when being instantiated from a <table>. We will address this limitation in the future. At this moment an alternative option to setting custom styles per column with Javascript is to use a row template:

http://demos.kendoui.com/web/grid/rowtemplate.html

All the best,
Dimo
the Telerik team

[Paul]

This was supported in the Teleriik MVC Extensions. It should also be supported with Kendo now that the Telerik MVC Extensions users are almost forced to migrate.

[PB1971]

To align the column in a grid use the following:

Sample Column Definition:
                                    {
                                        field: "price",
                                        title: "Price ($)",
                                        width: "80px",
                                        template: '<span style="float:right">#= price #</span>'
                                    }

[Jeffrey]

For your reference.  Here is my way to add custom css feature for Kendo UI grid. 
Modify kendo.web.js as below:

for (idx = 0; idx < length; idx++) {

column = that.columns[idx];

template = column.template;

type = typeof template;

//2012-06-04 by Jeffrey, Add support to custom css

rowTemplate += "<td " + (column.css ? "class='" + column.css + "'" : "") + ">";

rowTemplate += that._cellTmpl(column, state);

rowTemplate += "</td>";

}

Then I can assign custom css name in column configuration: 

$("#dvGrid").kendoGrid({

    dataSource: dataSrc,

    columns: [

            { field: "FieldName", title: "Column Title", css: "my-custom-css-name" },

[Jeffrey]

Just found that Kendo UI v2012.2.710 had enhanced the customization ability of default column template: (which not included in online document)

for (idx = 0; idx < length; idx++) {

    column = that.columns[idx];

    template = column.template;

    type = typeof template;

  

    rowTemplate += "<td" + stringifyAttributes(column.attributes) + ">";

    rowTemplate += that._cellTmpl(column, state);

  

    rowTemplate += "</td>";

}

Now you can use column.attributes to assign CSS style or other attribute:

{ field: "UserName", title: "User Name", width: 70, attributes: { "class": "my-css-name", "data-boo": "foo" } },

[Todd]

Thanks Jeffrey, this is very helpful for controlling the <td> (CSS class and custom attributes like style).  I'd like to know if there's a way to control the header of the column...if you're centering a column, you usually want to center the header too.

-Dean

[Jeffrey]

to Todd, 

The header text should be center-aligned in most of my scenarios, so I add a CSS rule like this:

#dvGrid th.k-header { text-align: center }

For your reference.

Jeffrey

[Todd]

Jeffrey, thanks but I know how to center every column in a grid (just use the CSS you posted).  What is needed is a way to put a CSS class on the grid's column definition that applies to the header...that way you can easily control one header/column.  With the "attributes" property you discovered, you can add a class to the cells in the table body, but that won't affect the <th> header.

[Ian]

Hi,
I had a requirement to right-align currency columns and encountered the same issue trying to align the column headers for [only] the specific columns involved.

It's not an ideal solution but if you know that your users are running CSS3-capable browsers, you can use the nth-child selector to apply alignment to only the required columns. For example, the rule below right-aligns the header for the third column only.

#grid th.k-header:nth-child(3) { text-align:right; }

Regards, Ian

[Bob]

This should do the trick for anyone looking to change the alignment on any single column. Add .Width() to that line and declare the width you would like the column to be.
@(Html.Kendo().Grid(Model).Name(blahGrid).Columns(columns =>
{
columns.Bound(c => c.Price).Format("{0:C}").HtmlAttributes(new { style = "text-align:right" });
})

[Nathan]

Thanks for posting that code Bob, it helped me.  I was scared for a second I'd have to ask the admins how to do it and get the normal incomplete answer.

[AMIT]

How to align "Export to Excel" button in the right side of the grid instead of left aligned on Kendo Grid?

[Dimiter Madjarov]

Hello AMIT,

You could set the text-align property of the Grid toolbar in order to achieve the desired behavior. Here is an example that demonstrates this.

Regards,
Dimiter Madjarov
Telerik

 

 

[Steven]

First - Thanks Bob! 
Second - I found it necessary as I do with most styling changes for Telerik, that you need to add the !important attribute to override the css rules in place.
.Format("{0:C}").HtmlAttributes(new { style = "text-align:left !important" })

Thanks again,

~Steve

 

[Dimo]

Hello Steven,

HtmlAtrributes() are applied as inline styles, which normally take precedence over all other styles. Using !important for inline styles is required extremely rarely, only if an external style has !important too. We use !important quite sparingly and for a reason. We do not have specific text-align style for Grid cells, so the style that you need to override may come from somewhere else. I recommend checking in the browser's DOM inspector.

In most cases !important is not necessary in external styles if the selector's specificity is high enough.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Regards,
Dimo
Telerik by Progress

[Kent]

Inside of Column definitions you can do something like this:

attributes:{ class:"text-right" },

headerAttributes: {
"style": "text-align: right !important; padding-right:10px;"
},

So a field definition in full may look like this:

{
field: "InvoiceTotalAmount",
title: "Invoice Amount",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
},
attributes:{ class:"text-right" },
headerAttributes: {
"style": "text-align: right !important; padding-right:10px;"
},
template:"<span> {{dataItem.InvoiceTotalAmount | currency : '$' : 2}} </span>"
}

[John]

I used this statement and it formatted the data perfectly:

                columns.Bound(c => c.AmountFinanced).Width(100).Format("{0:C}").HtmlAttributes(new { style = "text-align:right" });

But, the heading is still left justified.  Does it make sense to right justify the header when the header contains a filter image on the far right?  Just wondering if it is possible/desirable to right justify the heading so it matches the data.

[Dimo]

Hi John,

The filter icon will prevent the header text from being perfectly aligned with the data cell text, as you have noticed. So the header text alignment is likely to be a matter or personal preference. My advice is to test and see both options with your own eyes and pick the one you like more. The UI designer of the web application will most probably have an opinion too.

Header text alignment can be controlled via .HeaderHtmlAttributes() in the same way as data cells' text alignment.

Regards,
Dimo
Progress Telerik

[John]

Thanks, looks great.

[Ed]

To center a column's data, in the column definition, add a width and `attributes: { style: "text-align:center;" }` to it. This applies the style to the field's `<td>` cell.

I had a column with a checkbox in it and this was the simplest way I found to have it centered in the column.

Here is a code snippet from my grid configuration:

columns: [{
    field: "IsEnabled",
    title: "Enabled?",
    width: "100px",
    template: "<input type='checkbox' #=IsEnabled?checked='checked' : ''# class='isEnabled' title='Click to toggle'/>",
    attributes: { style: "text-align:center;" }
},
{
    field: "Name",
    title: "Name",
    width: "100px"
}]