[CLOSED] Changing the background color of an entire grid column when column header is clicked.

  1. #1

    [CLOSED] Changing the background color of an entire grid column when column header is clicked.

    Hi,

    How do you apply a custom css to an entire column to differentiate it from the other column when the column header is clicked. I am capturing the headerclick event on the grid but there seem not to be an addclass method on the column object retrieved.

    Regards
    Last edited by Daniil; Nov 26, 2011 at 3:25 PM. Reason: [CLOSED]
  2. #2
    Hi,

    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)
            {
                this.Store1.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                this.Store1.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 onHeaderClick = function (grid, colIndex, e) {
                grid.store.colorColIndex = colIndex;
                grid.getView().refresh();  
            };
    
            var colorRenderer = function (value, metadata, record, rowIndex, colIndex, store) {
                if (store.colorColIndex === colIndex) {
                    metadata.style = "background-color: red;";
                }
                return value;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store ID="Store1" 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">
                            <Renderer Fn="colorRenderer" />
                        </ext:Column>
                        <ext:Column Header="Test2" DataIndex="test2">
                            <Renderer Fn="colorRenderer" />
                        </ext:Column>
                        <ext:Column Header="Test3" DataIndex="test3">
                            <Renderer Fn="colorRenderer" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <HeaderClick Fn="onHeaderClick" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 7
    Last Post: Jul 11, 2012, 1:12 PM
  2. Replies: 0
    Last Post: Feb 23, 2012, 5:05 AM
  3. Replies: 0
    Last Post: Sep 27, 2011, 10:24 AM
  4. Changing TreePanel background color
    By wexman in forum 1.x Help
    Replies: 3
    Last Post: Apr 06, 2011, 2:35 PM
  5. [CLOSED] Changing background color of TabPanel on the fly
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 07, 2010, 12:23 PM

Posting Permissions