[CLOSED] GridPanel Column Header Alignment

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] GridPanel Column Header Alignment

    Hi, I am new to Ext.net 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 11:56 AM. Reason: [CLOSED]
  2. #2
    Hi,

    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 1: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">
    <Content>
        <ext:GridPanel ID="GridPanelHistory" runat="server"
            Cls="x-grid-custom"
            Border="false"
            ColumnLines="true"
            DDText="No Records To Display..."
            DisableSelection="true"
            Header="true"
            StripeRows="true"
            TrackMouseOver="true" >
            <ColumnModel ID="ColumnModelHistory" runat="server">
                <Columns>
                    <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>
                    <ext:Column DataIndex="Primary Client Name" Header="Primary Client Name" Width="135">
                        <Renderer Fn="colWrap" />
                    </ext:Column>
                    <ext:Column DataIndex="Project Name" Header="Project Name" Width="135">
                        <Renderer Fn="colWrap" />
                    </ext:Column>
                   <ext:Column DataIndex="Revenue JTD" Header="Revenue JTD" Align="Right">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column DataIndex="Target Multi" Header="Target<br />Multi" Align="Center" Width="55">
                        <Renderer Fn="formatDecimal" />
                    </ext:Column>
                    <ext:Column DataIndex="Budget Multi" Header="Budget<br />Multi" Align="Center" Width="60">
                        <Renderer Fn="formatDecimal" />
                    </ext:Column>
                    <ext:Column DataIndex="JTD Multi" Header="JTD<br />Multi" Align="Center" Width="55">
                        <Renderer Fn="formatDecimal" />
                    </ext:Column>
                    <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:Column>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ID="grdNoProjHist" runat="server"
                    DeferEmptyText="true"
                    EmptyText="No Records to Display"
                    EnableTheming="true" EnableRowBody="true">
                </ext:GridView>
            </View>
        </ext:GridPanel>
    </Content>
    </ext:Panel>
    Attached Thumbnails Click image for larger version. 

Name:	Ext.Net-Alignment.jpg 
Views:	703 
Size:	42.1 KB 
ID:	2573  
  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;
        }
    </style>
    
    <ext:Column ColumnID="test1" Header="Test1" DataIndex="test1" Align="Right" />
    Please note that there is ColumnID in the css class name.
    .x-grid3-hd-test1

Similar Threads

  1. [CLOSED] Command Column alignment + header text not working
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 10, 2012, 8:57 AM
  2. Replies: 2
    Last Post: Feb 22, 2012, 4:16 PM
  3. [CLOSED] [1.0] GridPanel issue with Grouping and Column Alignment
    By schimkem in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 30, 2010, 2:09 PM
  4. [CLOSED] GridPanel column header and column chooser different value
    By acrossdev in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 07, 2009, 6:01 AM
  5. [CLOSED] Column alignment with scrollbars in GridPanel
    By jsemple in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Mar 09, 2009, 3:58 PM

Posting Permissions