[CLOSED] changing the background color for gridPanel's column not working

  1. #1

    [CLOSED] changing the background color for gridPanel's column not working

    Hi,
    I am trying to set the Cls property to a CSS class to change the GridPanel's Column background color but it is not working. It works if I set
    StyleSpec ="background: Green;"
    but I need to use a CSS so that I can change all the field's colors in one location.
    For example, in my example the background color for Comany,Price,Change and last update does not get changed if even I set
    Cls="highlightDetails"
    .

    Can you please show me how to change the column background color - for both the label text and field object?
    Below is my code for your review. Thanks in advance for your help.


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <head>
    <style type="text/css">
    .highlightDetails
    {
        background-color:Green !Important;
       
    }
    
    </style>
    </head>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
      
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </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 id="Head1" runat="server">
        <title>background color - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="FormPanelRunDetails" runat="server" Layout="FitLayout" AutoScroll="false">
            <Items>
    
                                        <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="175">
                                            <Store>
                                                <ext:Store ID="Store1" runat="server">
                                                    <Model>
                                                        <ext:Model ID="Model1" runat="server">
                                                            <Fields>
                                                                <ext:ModelField Name="company" />
                                                                <ext:ModelField Name="price" Type="Float" />
                                                                <ext:ModelField Name="change" Type="Float" />
                                                                <ext:ModelField Name="pctChange" Type="Float" />
                                                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                                            </Fields>
                                                        </ext:Model>
                                                    </Model>
                                                </ext:Store>
                                            </Store>
                                            <ColumnModel>
                                                <Columns>
                                                 
                                                    <ext:Column ID="Column1" runat="server" Cls="highlightDetails" Text="Company" DataIndex="company" Flex="1" />
                                                    <ext:Column ID="Column2" runat="server" Cls="highlightDetails" Text="Price" DataIndex="price">
                                                    </ext:Column>
                                                    <ext:Column ID="Column3" runat="server" Cls="highlightDetails" Text="Change" DataIndex="change">
                                                    </ext:Column>
                                                    <ext:Column ID="Column4" runat="server"  Cls="highlightDetails" Text="Change"  DataIndex="pctChange">
                                                    </ext:Column>
                                                    <ext:DateColumn ID="DateColumn1" Cls="highlightDetails" runat="server" Text="Last Updated" DataIndex="lastChange" />
                                                </Columns>
                                            </ColumnModel>
                                            <SelectionModel>
                                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" >
                                              
                                                </ext:RowSelectionModel>
                                            </SelectionModel>
                                        
                                        </ext:GridPanel>
                                       
                                    </Items>
                                </ext:Panel>
                          
    </body>
    </html>
    Last edited by Daniil; Jul 13, 2012 at 8:23 PM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi,

    Please use the TdCls property instead of the Cls one.
    TdCls="highlightDetails"
    See also
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-tdCls
  3. #3
    Thanks for the reply.
    This does not work when I using it in the client script. I received this eror message - "Error: Object doesn't support this property or method".
    I need to change the background color when the user is selecting a row in the gridpanel. Can you please let me know how can I change the background color dynamically using the javascript? Thanks in advance!
    Please see my code below:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <head>
    <style type="text/css">
    .highlightDetails
    {
    
        background-color:Green !Important;
        border:5px solid yellow;
        
    }
    
    </style>
    </head>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
      
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </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 id="Head1" runat="server">
        <title>background color - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="FormPanelRunDetails" runat="server" Layout="FitLayout" AutoScroll="false">
            <Items>
    
                                        <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="175">
                                            <Store>
                                                <ext:Store ID="Store1" runat="server">
                                                    <Model>
                                                        <ext:Model ID="Model1" runat="server">
                                                            <Fields>
                                                                <ext:ModelField Name="company" />
                                                                <ext:ModelField Name="price" Type="Float" />
                                                                <ext:ModelField Name="change" Type="Float" />
                                                                <ext:ModelField Name="pctChange" Type="Float" />
                                                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                                            </Fields>
                                                        </ext:Model>
                                                    </Model>
                                                </ext:Store>
                                            </Store>
                                            <ColumnModel>
                                                <Columns>
                                                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                                                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
                                                    </ext:Column>
                                                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                                                    </ext:Column>
                                                    <ext:Column ID="Column4" runat="server"  Text="Change"  DataIndex="pctChange">
                                                    </ext:Column>
                                                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                                                </Columns>
                                            </ColumnModel>
                                            <SelectionModel>
                                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" >
                                                 <Listeners>
                                                        <Select Handler="Ext.get('FormPanelRunDetails').addTdCls('highlightDetails');
                                                            Ext.get('GridPanel1').addTdCls('highlightDetails');
                                                           Ext.get('Column1').addTdCls('highlightDetails');
                                                        ">
                                                        </Select>
                                                    </Listeners>
                                                </ext:RowSelectionModel>
                                            </SelectionModel>
                                        
                                        </ext:GridPanel>
                                       
                                    </Items>
                                </ext:Panel>
                          
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    Hi,

    Please use the TdCls property instead of the Cls one.
    TdCls="highlightDetails"
    See also
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-tdCls
    Last edited by Daniil; Jul 11, 2012 at 1:44 PM. Reason: Please use [CODE] tags
  4. #4
    Please wrap the code in [CODE ] tags using the "Edit Post" button.
    Forum Guidelines For Posting New Topics
  5. #5
    OK. Here it is:
    This does not work when I using it in the client script. I received this eror message - "Error: Object doesn't support this property or method".
    I need to change the background color when the user is selecting a row in the gridpanel. Can you please let me know how can I change the background color dynamically using the javascript? Thanks in advance!
    Please see my code below:
    
    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <head>
        <style type="text/css">
            .highlightDetails
            {
                background-color: Green !important;
                border: 5px solid yellow;
            }
        </style>
    </head>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </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 id="Head1" runat="server">
        <title>background color - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="FormPanelRunDetails" runat="server" Layout="FitLayout" AutoScroll="false">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="175">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="price" Type="Float" />
                                        <ext:ModelField Name="change" Type="Float" />
                                        <ext:ModelField Name="pctChange" Type="Float" />
                                        <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel>
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                            <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
                            </ext:Column>
                            <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                            </ext:Column>
                            <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                            </ext:Column>
                            <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
                            <Listeners>
                                <Select Handler="Ext.get('FormPanelRunDetails').addCls('highlightDetails');
                                                            Ext.get('GridPanel1').addCls('highlightDetails');
                                                           Ext.get('Column1').addTdCls('highlightDetails');
                                                           Ext.get('Column2').addTdCls('highlightDetails');
                                                           Ext.get('Column3').addTdCls('highlightDetails');
                                                           Ext.get('Column4').addTdCls('highlightDetails');
                                                           Ext.get('DateColumn1').addTdCls('highlightDetails');
                                                        ">
                                </Select>
                            </Listeners>
                        </ext:RowSelectionModel>
                    </SelectionModel>
                </ext:GridPanel>
            </Items>
        </ext:Panel>
    </body>
    </html>

    Quote Originally Posted by Daniil View Post
    Please wrap the code in [CODE ] tags using the "Edit Post" button.
    Forum Guidelines For Posting New Topics
  6. #6
    Quote Originally Posted by Fahd View Post
    I need to change the background color when the user is selecting a row in the gridpanel.
    The background color of a whole row? Do you need the same color for all selected rows?
  7. #7
    Yes. The same color for the whole row.
    Thanks.
    Quote Originally Posted by Daniil View Post
    The background color of a whole row? Do you need the same color for all selected rows?
  8. #8
    Then I would suggest to achieve that via CSS.
    http://examples2.ext.net/#/GridPanel...ous/Custom_UI/

    Here are the related CSS rules in the example.
    .x-grid-custom .x-grid-row-selected .x-grid-cell {
        background   : url(row-selected.png) repeat-x scroll 0 0 #7BBBCF;
        border-color : #728BA1;
        border-style : solid;
    }
            
    .x-grid-custom .x-grid-row-selected TD, 
    .x-grid-custom .x-grid-row-selected TD .company-link {
        color : #fff;
    }

Similar Threads

  1. [CLOSED] GridPanel.Rows.Changing Background Color of Rows
    By supera in forum 2.x Premium Help
    Replies: 2
    Last Post: Mar 01, 2012, 6:18 PM
  2. [CLOSED] Changing the background color of htmleditor
    By SymSure in forum 1.x Premium Help
    Replies: 2
    Last Post: Jan 18, 2012, 6:41 PM
  3. Replies: 1
    Last Post: Nov 24, 2011, 7:48 AM
  4. Changing TreePanel background color
    By wexman in forum 1.x Help
    Replies: 3
    Last Post: Apr 06, 2011, 3:35 PM
  5. [CLOSED] Changing background color of TabPanel on the fly
    By rmelancon in forum 1.x Premium Help
    Replies: 6
    Last Post: Oct 07, 2010, 1:23 PM

Posting Permissions