Alignment and width of a Grid Cell

9 Answers 5356 Views
Grid
mvbaffa
Top achievements
Rank 1
mvbaffa asked on 29 Oct 2011, 08:00 PM
Hi, 

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

Thanks in advance

9 Answers, 1 is accepted

Sort by
0
mvbaffa
Top achievements
Rank 1
answered on 29 Oct 2011, 08:07 PM
I have found it.

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

Thanks anyway
0
Dimo
Telerik team
answered on 31 Oct 2011, 08:09 AM
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
Top achievements
Rank 1
commented on 04 Dec 2011, 04:50 AM

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
Telerik team
commented on 05 Dec 2011, 07:38 AM

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
Top achievements
Rank 1
commented on 11 Dec 2011, 10:37 PM

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
Top achievements
Rank 1
commented on 12 Dec 2011, 04:22 AM

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
Telerik team
commented on 12 Dec 2011, 09:08 AM

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!
Paul
Top achievements
Rank 1
commented on 02 Jun 2012, 07:16 PM

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.
0
PB1971
Top achievements
Rank 1
answered on 28 Dec 2011, 12:12 AM
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>'
                                    }
0
Jeffrey
Top achievements
Rank 1
answered on 05 Jun 2012, 09:58 AM

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
Top achievements
Rank 1
commented on 14 Aug 2012, 09:14 AM

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
Top achievements
Rank 1
commented on 29 Aug 2012, 06:56 PM

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
Top achievements
Rank 1
commented on 31 Aug 2012, 03:10 AM

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
Top achievements
Rank 1
commented on 31 Aug 2012, 09:25 PM

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.
0
Ian
Top achievements
Rank 1
answered on 16 Oct 2012, 10:32 AM
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
0
Bob
Top achievements
Rank 1
answered on 03 Mar 2014, 08:08 PM
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
Top achievements
Rank 1
commented on 09 Apr 2014, 07:07 PM

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
Top achievements
Rank 1
commented on 22 May 2015, 09:42 PM

How to align "Export to Excel" button in the right side of the grid instead of left aligned on Kendo Grid?
Dimiter Madjarov
Telerik team
commented on 27 May 2015, 02:09 PM

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!
 
Steven
Top achievements
Rank 1
commented on 01 Mar 2017, 09:34 PM

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
Telerik team
commented on 02 Mar 2017, 01:50 PM

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.
0
Kent
Top achievements
Rank 1
answered on 10 Nov 2016, 05:27 PM

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

0
John
Top achievements
Rank 1
answered on 07 Jan 2019, 02:00 PM

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
Telerik team
commented on 07 Jan 2019, 02:32 PM

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
Top achievements
Rank 1
commented on 08 Jan 2019, 03:18 PM

Thanks, looks great.
0
Ed
Top achievements
Rank 1
answered on 25 Jan 2019, 02:11 PM

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"
}]
Tags
Grid
Asked by
mvbaffa
Top achievements
Rank 1
Answers by
mvbaffa
Top achievements
Rank 1
Dimo
Telerik team
PB1971
Top achievements
Rank 1
Jeffrey
Top achievements
Rank 1
Ian
Top achievements
Rank 1
Bob
Top achievements
Rank 1
Kent
Top achievements
Rank 1
John
Top achievements
Rank 1
Ed
Top achievements
Rank 1
Share this question
or