EXT.NET v3.0 BETA RELEASED!
Now with Tablet Support!
Ext.NET v3.0 Beta is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Results 1 to 4 of 4

Thread: [CLOSED] GridPanel Column Header Alignment

  1. #1
    Member
    Join Date
    Jan 2011
    Posts
    11

    [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 12:56 PM. Reason: [CLOSED]

  2. #2
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,843
    Hi,

    Align="Center" of Column aligns a header cell to center.
    Code:
    <ext:Column Header="Test" DataIndex="test" Align="Center" />
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Member
    Join Date
    Jan 2011
    Posts
    11
    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.

    Code:
    <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 Attached Thumbnails Click image for larger version. 

Name:	Ext.Net-Alignment.jpg 
Views:	561 
Size:	42.1 KB 
ID:	2573  

  4. #4
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,843
    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.
    Code:
    <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.
    Code:
    .x-grid3-hd-test1
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

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