The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] GridPanel Column Header Alignment

  1. #1

    [CLOSED] GridPanel Column Header Alignment

    Hi, I am new to and trying to figure out how to align the text in a column header. Most likely to the center. I know you can easily align the column information, but I have searched and not seeing anything about header alignment. It wouldn't necessarily be all the headers for a grid either. I assume it would be a Renderer function of some sort, but not sure what to call. Thanks!
    Last edited by Daniil; Apr 15, 2011 at 12:56 PM. Reason: [CLOSED]
  2. #2

    Align="Center" of Column aligns a header cell to center.

    <ext:Column Header="Test" DataIndex="test" Align="Center" />
    Last edited by geoffrey.mcgill; Apr 26, 2016 at 2:20 AM.
  3. #3
    I have attached a screenshot and a portion of the code. In the screenshot you can see that the Review Status, Contract Type and 2 other columns, the information is centered but not the but not the header. The farthest column to the right, "Super G JTD", the information needs to be aligned to the right, which it is, but the column header is aligned to the left, and I would like it centered. So how can you specify a column information alignment and a different header alignment? Even though the align tag doesn't seem to be affecting the column header for me at the moment.

    <ext:Panel ID="pnlHistory" runat="server" Title="History" Layout="Fit" AutoScroll="true">
        <ext:GridPanel ID="GridPanelHistory" runat="server"
            DDText="No Records To Display..."
            TrackMouseOver="true" >
            <ColumnModel ID="ColumnModelHistory" runat="server">
                    <ext:Column DataIndex="Project Number" Header="Project&nbsp;Number" Width="100" ColumnID="ProjectNumber" />
                    <ext:Column DataIndex="Reviewable" Header="Reviewable" Hidden="true" />
                    <ext:Column DataIndex="Review Status" Header="Review Status" Align="Center" Width="125" />
                    <ext:Column DataIndex="Project Manager" Header="Project Manager" Width="135">
                        <Renderer Fn="colWrap" />
                    <ext:Column DataIndex="Primary Client Name" Header="Primary Client Name" Width="135">
                        <Renderer Fn="colWrap" />
                    <ext:Column DataIndex="Project Name" Header="Project Name" Width="135">
                        <Renderer Fn="colWrap" />
                   <ext:Column DataIndex="Revenue JTD" Header="Revenue JTD" Align="Right">
                        <Renderer Format="UsMoney" />
                    <ext:Column DataIndex="Target Multi" Header="Target<br />Multi" Align="Center" Width="55">
                        <Renderer Fn="formatDecimal" />
                    <ext:Column DataIndex="Budget Multi" Header="Budget<br />Multi" Align="Center" Width="60">
                        <Renderer Fn="formatDecimal" />
                    <ext:Column DataIndex="JTD Multi" Header="JTD<br />Multi" Align="Center" Width="55">
                        <Renderer Fn="formatDecimal" />
                    <ext:Column DataIndex="Contract Type" Header="Contract Type" Align="Center" Width="55" />
                    <ext:Column DataIndex="Revenue Type" Header="Revenue Type" Align="Center" Width="55" />
                    <ext:Column DataIndex="Project Status" Header="Project Status" Align="Center" Width="55" />
                    <ext:Column DataIndex="Super G JTD" Header="Super G JTD" Align="Right">
                        <Renderer Format="UsMoney" />
                <ext:GridView ID="grdNoProjHist" runat="server"
                    EmptyText="No Records to Display"
                    EnableTheming="true" EnableRowBody="true">
    Attached Thumbnails Ext.Net-Alignment.jpg  
  4. #4
    It's strange that .Align is not applied on header cell, it should. If you provide a full sample, we will investigate.

    But all the same, you need a solution to have different aligns for a header cell and other ones.

    The following column suites your needs.
    <style type="text/css">
        .x-grid3-hd-test1 {
            text-align: center;
    <ext:Column ColumnID="test1" Header="Test1" DataIndex="test1" Align="Right" />
    Please note that there is ColumnID in the css class name.

Similar Threads

  1. [CLOSED] Command Column alignment + header text not working
    By machinableed in forum 2.x Premium Help
    Replies: 1
    Last Post: Apr 10, 2012, 9:57 AM
  2. Replies: 2
    Last Post: Feb 22, 2012, 5:16 PM
  3. Replies: 3
    Last Post: Jun 30, 2010, 3:09 PM
  4. Replies: 1
    Last Post: Jul 07, 2009, 7:01 AM
  5. [CLOSED] Column alignment with scrollbars in GridPanel
    By jsemple in forum 1.x Premium Help
    Replies: 11
    Last Post: Mar 09, 2009, 4:58 PM

Posting Permissions