Alignment and width of a Grid Cell in Kendo UI for jQuery Grid

mvbaffa

102 posts

Member since:
Dec 2006

Posted 29 Oct 2011 Link to this post

Hi,

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

Thanks in advance

mvbaffa

102 posts

Member since:
Dec 2006

Posted 29 Oct 2011 Link to this post

I have found it.

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

Thanks anyway

Dimo

Admin

8457 posts

Posted 31 Oct 2011 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Gema

6 posts

Member since:
Sep 2011

Posted 03 Dec 2011 Link to this post

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

Admin

8457 posts

Posted 05 Dec 2011 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Igor

18 posts

Member since:
Oct 2011

Posted 11 Dec 2011 Link to this post

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

6 posts

Member since:
Sep 2011

Posted 11 Dec 2011 Link to this post

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

Admin

8457 posts

Posted 12 Dec 2011 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

PB1971

2 posts

Member since:
Mar 2006

Posted 27 Dec 2011 Link to this post

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>'
}

Paul

9 posts

Member since:
Jan 2011

Posted 02 Jun 2012 Link to this post

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.

Jeffrey

19 posts

Member since:
Dec 2010

Posted 05 Jun 2012 Link to this post

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

19 posts

Member since:
Dec 2010

Posted 14 Aug 2012 Link to this post

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

26 posts

Member since:
Sep 2012

Posted 29 Aug 2012 Link to this post

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

19 posts

Member since:
Dec 2010

Posted 30 Aug 2012 Link to this post

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

26 posts

Member since:
Sep 2012

Posted 31 Aug 2012 Link to this post

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

129 posts

Member since:
Jun 2009

Posted 16 Oct 2012 Link to this post

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

4 posts

Member since:
Jul 2011

Posted 03 Mar 2014 Link to this post

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

23 posts

Member since:
Jul 2012

Posted 09 Apr 2014 in reply to Bob Link to this post

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

1 posts

Member since:
Feb 2015

Posted 22 May 2015 in reply to Dimo Link to this post

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

Dimiter Madjarov

Admin

2306 posts

Posted 27 May 2015 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Kent

1 posts

Member since:
Jul 2016

Posted 10 Nov 2016 Link to this post

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>"
}

Steven

1 posts

Member since:
Nov 2016

Posted 01 Mar 2017 in reply to Bob Link to this post

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

Admin

8457 posts

Posted 02 Mar 2017 Link to this post

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

John

36 posts

Member since:
Nov 2018

Posted 07 Jan in reply to Dimo Link to this post

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

Admin

8457 posts

Posted 07 Jan Link to this post

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

John

36 posts

Member since:
Nov 2018

Posted 08 Jan in reply to Dimo Link to this post

Thanks, looks great.

Ed

8 posts

Member since:
Aug 2012

Posted 25 Jan in reply to mvbaffa Link to this post

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"

}]