[CLOSED] GridPanel Column Header Alignment

[ArcadisUS]

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!

[Daniil]

Hi,

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

<ext:Column Header="Test" DataIndex="test" Align="Center" />

[ArcadisUS]

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>

[Daniil]

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