[CLOSED] [1.0] Centralize Column Header Grid Panel

  1. #1

    [CLOSED] [1.0] Centralize Column Header Grid Panel

    Hello!

    I need to centralize only column header of Grid Panel. How do i do it?
    Last edited by Daniil; Aug 23, 2010 at 8:11 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Please look at the example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.Store.Primary;
                store.DataSource = new object[] { 
                                             new object[] {"test1", "test1", "test1"},
                                             new object[] {"test2", "test2", "test2"},
                                             new object[] {"test3", "test3", "test3"}
                                    };
                store.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column DataIndex="test1" Header="Test1"/>
                    <ext:Column DataIndex="test2" Header="Test2"/>
                    <ext:Column DataIndex="test3" Header="Test3"/>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView>
                    <HeaderGroupRows>
                        <ext:HeaderGroupRow>
                            <Columns>
                                <ext:HeaderGroupColumn Header="Header" Align="Center" ColSpan="3" />
                            </Columns>
                        </ext:HeaderGroupRow>
                    </HeaderGroupRows>
                </ext:GridView>
            </View>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    It seems I didn't understand you properly. Do you mean centralize only header column cell but not others, right?
    I would suggest you to use getHeaderCell method of GridView in the its AfterRender event listener.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.Store.Primary;
                store.DataSource = new object[] {
                                             new object[] {"test1", "test1", "test1"},
                                             new object[] {"test2", "test2", "test2"},
                                             new object[] {"test3", "test3", "test3"}
                                    };
                store.DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column DataIndex="test1" Header="Test1"/>
                    <ext:Column DataIndex="test2" Header="Test2"/>
                    <ext:Column DataIndex="test3" Header="Test3"/>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView>
                    <Listeners>
                        <AfterRender Handler="this.getHeaderCell(1).align = 'center'"/>    
                    </Listeners>
                </ext:GridView>
            </View>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  4. #4
    Hi,

    The solution found has using css.

    <style type="text/css">
        .x-grid3-hd-row td
        {
            text-align: center;
        }
    </style>
    Thanks for help!

Similar Threads

  1. [CLOSED] Icon in Grid Column header
    By FAS in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 14, 2012, 1:30 PM
  2. Replies: 1
    Last Post: Nov 24, 2011, 6:48 AM
  3. Grid panel column header localization
    By reezvi in forum 1.x Help
    Replies: 5
    Last Post: Aug 08, 2011, 9:57 AM
  4. Replies: 16
    Last Post: Feb 23, 2011, 10:03 AM
  5. [CLOSED] [1.0] Possible to Add Icon to Grid Column Header?
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 14, 2010, 2:34 PM

Posting Permissions