Ext.net grid: how to align column content?

Question

this seems a stupid question, but i can't align column content in a Ext.Net gridpanel ! I use this :

<ext:Column DataIndex="category1" Header="Category" Align="Left" Width="80" />

But only the column header is aligned, not the content ! Thanks

Answer 1

To give different alignments for the column header and content, you should assign the ColumnID attribute for the ext:Column. And then, you will be able to give one alignment for the header (by CSS with ColumnID in the class name) and another one for the content with the Align attribute.

For example, to align the header to the center and the content to the left, your code will be like that:

<style type="text/css">
   .x-grid3-hd-category1 
   {
      text-align: center;
   }
</style>
<ext:Column ColumnID="category1" DataIndex="category1" Header="Category" Align="Left" Width="80" />

Answer 2

Another approach without the need of adding a custom CSS class, is setting the CSS attribute of the Column (adding inline css)

Suppose you have a 'Name' column, you want the column title to be centered, but not the content, you could try.

<ext:Column ColumnID="NameColId" DataIndex="Name" Header="Full name" Align="Center" Css="text-align:left;" />

you could try adding "!important" to the inline css rule, if content is not aligned with the first attempt.

This does the same effect as amartine answer, just that this is Inline css.

Hope this helps.