9 Answers, 1 is accepted
Just include a <div align=center>your data</div> in the template of the cell.
Thanks anyway
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
do you have an example of "kendo-way" to align data in a kendo grid cell ? Thank you,
Best regards,
Gema Pratama
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
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
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
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
Sample Column Definition:
{
field: "price",
title: "Price ($)",
width: "80px",
template: '<span style="float:right">#= price #</span>'
}
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"
},
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>"
;
}
{ field:
"UserName"
, title:
"User Name"
, width: 70, attributes: { "class":
"my-css-name"
,
"data-boo"
:
"foo"
} },
-Dean
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
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
@(Html.Kendo().Grid(Model).Name(blahGrid).Columns(columns =>
{
columns.Bound(c => c.Price).Format("{0:C}").HtmlAttributes(new { style = "text-align:right" });
})
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
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
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
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>"
}
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.
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
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"
}]