[CLOSED] Column header text style

  1. #1

    [CLOSED] Column header text style

    Hi,

    How do I change the style of the text of a column in a GridPanel?
    When I click on the header of a column I would like to change the color of the header text
    and restore the original color when I click elsewhere.

    Is it possible?

    Bye,
    Stefano
    Last edited by Daniil; Feb 07, 2011 at 2:44 PM. Reason: [CLOSED]
  2. #2
    Hi,

    There is no such feature, but it can be implemented manually.

    Please investigate the following 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.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test11", "test12", "test13" },
                    new object[] { "test12", "test22", "test23" },
                    new object[] { "test13", "test32", "test33" }
                };
                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>
    
        <script type="text/javascript">
            var lock = false;
    
            var onBodyClick = function () {
                if (lock) {
                    lock = false;
                } else {
                    var grid = GridPanel1;
                    for (var i = 0; i < grid.getColumnModel().getColumnCount(); i++) {
                        grid.removeClass("my-hd-" + i);
                    }
                }
            }
    
            var onReady = function () {
                Ext.getBody().on('click', onBodyClick);
            }
    
            var onHeaderClickHandler = function (grid, columnIndex, e) {
                lock = true;
                grid.addClass("my-hd-" + columnIndex);
            }
        </script>
    
        <style type="text/css">
            .my-hd-0 .x-grid3-hd-0 {
                color: Red;
            }
            .my-hd-1 .x-grid3-hd-1 {
                color: Green;
            }
            .my-hd-2 .x-grid3-hd-2 {
                color: Yellow;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <DocumentReady Handler="onReady();" />
            </Listeners>
        </ext:ResourceManager>
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <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 Header="Test1" DataIndex="test1" />
                            <ext:Column Header="Test2" DataIndex="test2" />
                            <ext:Column Header="Test3" DataIndex="test3" />
                        </Columns>
                    </ColumnModel>
                    <Listeners>
                        <HeaderClick Fn="onHeaderClickHandler" />
                    </Listeners>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>

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: Jun 01, 2011, 8:12 AM
  3. [CLOSED] Change text in header group column.
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 09, 2011, 3:44 PM
  4. Replies: 0
    Last Post: Feb 17, 2010, 5:38 AM
  5. [CLOSED] Changind Column Header Text in AjaxRequest
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Feb 02, 2010, 2:34 PM

Tags for this Thread

Posting Permissions