[CLOSED] Change grid cell color

  1. #1

    [CLOSED] Change grid cell color

    Having a brain cramp here ! Trying to change the color of a cell in a grid based on the if another cell has a date in it.

    Any ideas, looked around the extjs site but nothing there has worked, thought maybe the guru's here had a quick trick in a handler or function.

    Thanks for any help.

    Bill
  2. #2

    RE: [CLOSED] Change grid cell color

    Hi,

    1. If you need to change color of cell in a grid based on the if another cell (BUT THIS CELL IN SAME ROW) has a date in it then you can use next.
    (Please note that these two cells must be in one row)

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] {"Test"},
                new object[] {"01/01/2008"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"}
            };
    
            this.Store1.DataBind();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Example</title>
        
        <script type="text/javascript">           
            var RenderColor = function(value, meta, record) {
                var color = 'red';
                if( !isNaN(Date.parse(record.data['TestCell'])) ){
                    color = 'green';    
                } 
                
                //or can set css tyle to meta.css
                meta.attr = 'style="background-color:'+ color +';"';
            }           
        </script>  
    </head>
    <body>    
        <form id="form1" runat="server">       
            
            <ext:ScriptManager ID="ScriptManager1" runat="server" />       
           
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="TestCell" />                     
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                StripeRows="true" 
                ClicksToEdit="1"
                Title="Test Grid" 
                Width="600"  
                Height="350"
                AutoExpandColumn="TestCell">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="TestCell" Header="TestCell" DataIndex="TestCell">                        
                        </ext:Column>  
                        <ext:Column ColumnID="ColorCell" Header="Color" DataIndex="ColorCell">
                            <Renderer Fn="RenderColor" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>            
            </ext:GridPanel>  
        </form>
    </body>
    </html>
    This code works for editable grid also


    2. But if cells in different rows then need another approach

    For example, you need to set green color for cell in [0,1] if in cell [1,0] date presents

    - example for none-editable grid

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] {"Test"},
                new object[] {"01/01/2008"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"}
            };
    
            this.Store1.DataBind();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Example</title>
        
        <script type="text/javascript">
            var RenderColor = function(value, meta, record, rowIndex, colIndex, store) {
    
                if (rowIndex == 0) { //first row
                    var seconRecord = store.getAt(1);
    
                    if (!Ext.isEmpty(seconRecord)) {
                        var color = 'red';
                        if (!isNaN(Date.parse(seconRecord.data['TestCell']))) {
                            color = 'green';
                        }
    
                        //or can set css tyle to meta.css
                        meta.attr = 'style="background-color:' + color + ';"';
                    }
                }            
            }           
        </script>  
    </head>
    <body>    
        <form id="form1" runat="server">       
            
            <ext:ScriptManager ID="ScriptManager1" runat="server" />       
           
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="TestCell" />                     
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                StripeRows="true" 
                ClicksToEdit="1"
                Title="Test Grid" 
                Width="600"  
                Height="350"
                AutoExpandColumn="TestCell">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="TestCell" Header="TestCell" DataIndex="TestCell">                        
                        </ext:Column>  
                        <ext:Column ColumnID="ColorCell" Header="Color" DataIndex="ColorCell">
                            <Renderer Fn="RenderColor" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>            
            </ext:GridPanel>  
        </form>
    </body>
    </html>

    - example for editable grid
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"},
                new object[] {"Test"}
            };
    
            this.Store1.DataBind();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Example</title>
        
        <script type="text/javascript">
            var RenderColor = function(value, meta, record, rowIndex, colIndex, store) {
    
                if (rowIndex == 0) { //first row
                    var seconRecord = store.getAt(1);
    
                    if (!Ext.isEmpty(seconRecord)) {
                        var color = 'red';
                        if (!isNaN(Date.parse(seconRecord.data['TestCell']))) {
                            color = 'green';
                        }
    
                        //or can set css tyle to meta.css
                        meta.attr = 'style="background-color:' + color + ';"';
                    }
                }
            }           
        </script>  
    </head>
    <body>    
        <form id="form1" runat="server">        
            <ext:ScriptManager ID="ScriptManager1" runat="server" />       
           
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="TestCell" />                       
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                StripeRows="true" 
                ClicksToEdit="1"
                Title="Test Grid" 
                Width="600"  
                Height="350"
                AutoExpandColumn="TestCell">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="TestCell" Header="TestCell" DataIndex="TestCell">
                            <Editor>
                                <ext:TextField ID="TextBox1" runat="server" />
                            </Editor>                        
                        </ext:Column>
                         <ext:Column ColumnID="ColorCell" Header="Color" DataIndex="ColorCell">
                            <Renderer Fn="RenderColor" />
                        </ext:Column>                    
                    </Columns>
                </ColumnModel>    
                <Listeners>
                    <AfterEdit Handler="if(e.row == 1){e.grid.getView().refreshRow(0);}" />
                </Listeners>        
            </ext:GridPanel>  
        </form>
    </body>
    </html>
    Hope this help

  3. #3

    RE: [CLOSED] Change grid cell color

    Vlad,

    Thanks for the quick reply, I was trying with the metadata, etc..etc. but I did not get it. Now I see.

    Thank you, can't wait for documentation specific for coolite. Going back and forth thru the extjs api docs is confusing, Well at least for me :-)

    Thanks again,

    Bill
  4. #4

    RE: [CLOSED] Change grid cell color

    Opps forgot to ask, the data text doesn't show up. This what I was running into with other methods.

    Am I missing something in the metadata ?
  5. #5

    RE: [CLOSED] Change grid cell color

    Vlad,

    ? - I tried the code, works great does change cell color, but text is not shown from cell. Now I tried to use tags and the background of the text in the cell changed but not the whole cell.

    Any ideas, I know I am missing something simple.

    Thanks again for your help
  6. #6

    RE: [CLOSED] Change grid cell color

    Hi,

    In the Render you should return data text

    return value;
  7. #7

    RE: [CLOSED] Change grid cell color

    OH.... DUH !!!!! man was not even thinking.

    I knew it was something simple and overlooked.

    Thanks
  8. #8
    Quote Originally Posted by BGeorge View Post
    OH.... DUH !!!!! man was not even thinking.

    I knew it was something simple and overlooked.

    Thanks
    Hi Vladimir,

    We want the similiar behavior for grid panel using editablegrid plugin. Please advise.

    Thanks
    Anulekha

Similar Threads

  1. [CLOSED] Change cell color for grid panel using editablegrid plugin
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 10, 2014, 4:43 AM
  2. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  3. How to Background color to the cell in Tree grid
    By rajputamit in forum 1.x Help
    Replies: 2
    Last Post: May 06, 2012, 4:16 PM
  4. [CLOSED] Change grid header color
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 26, 2011, 9:53 AM
  5. [CLOSED] Change grid cell color on fly
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 03, 2010, 1:27 PM

Posting Permissions