[CLOSED] grid cell background color - XTemplate

  1. #1

    [CLOSED] grid cell background color - XTemplate

    This question has been asked MANY times but i have a slight variation. I need to color the background of my cell. In normal cases, i would use a renderer and then meta.style which works great.


    Problem is that I am using a TemplateColumn so the renderer doesnt work. Please see example and suggest how i can make the red fill the entire cell. I had this problem previously, and ended to use a renderer instead of a template
    but i an not sure that this can work here since i use the for function in the XTemplate.


    Thanks,
    /Z


    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    
    <%@ Import Namespace="Crystal" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    
    
    <!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></title>
    
    
    <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new List<Company> 
             { 
                 new Company(1, "3m Co", 71.72, 0.02, 0.03, true),
                 new Company(2, "Alcoa Inc", 29.01, 0.42, 1.47, true),
                 new Company(3, "Altria Group Inc", 83.81, 0.28, 0.34, true),
                 new Company(4, "American Express Company", 52.55, 0.01, 0.02, true),
                 new Company(5, "American International Group, Inc.", 64.13, 0.31, 0.49, true),
                 new Company(6, "AT&T Inc.", 31.61, -0.48, -1.54, true),
                 new Company(7, "Boeing Co.", 75.43, 0.53, 0.71, true),
                 new Company(8, "Caterpillar Inc.", 67.27, 0.92, 1.39, true),
                 new Company(9, "Citigroup, Inc.", 49.37, 0.02, 0.04, true),
                 new Company(10, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, true),
                 new Company(11, "Exxon Mobil Corp", 68.1, -0.43, -0.64, true),
                 new Company(12, "General Electric Company", 34.14, -0.08, -0.23, true),
                 new Company(13, "General Motors Corporation", 30.27, 1.09, 3.74, true),
                 new Company(14, "Hewlett-Packard Co.", 36.53, -0.03, -0.08, true),
                 new Company(15, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(16, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, true),
                 new Company(17, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(18, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(19, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(20, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(21, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(22, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(23, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(24, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(25, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(26, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(27, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(28, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(29, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(30, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(31, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(32, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(33, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(34, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(35, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(36, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(37, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(38, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(39, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(40, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(41, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
                 new Company(42, "Honeywell Intl Inc", 38.77, 0.05, 0.13, true),
             };
    
    
            this.Store1.DataBind();
    
    
        }
    
    
        public class Company
        {
            public Company(long id, string name, double price, double change, double pctChange, bool checkedVal)
            {
                this.id = id;
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
                this.checkedVal = checkedVal;
            }
    
    
            public long id { get; set; }
            public string Name { get; set; }
            public double Price { get; set; }
            public double Change { get; set; }
            public double PctChange { get; set; }
            public bool checkedVal { get; set; }
        }
    </script>
    
    
    
    
    </head>
    <body>
    <form id="AddNodeForm" runat="server">
    
    
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
            
         <ext:Store ID="Store1" runat="server" GroupField="Change">
            <Reader>
                <ext:JsonReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="Name" />
                        <ext:RecordField Name="Price" />
                        <ext:RecordField Name="Change" />
                        <ext:RecordField Name="PctChange" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
    
    
            <ext:Viewport ID="Viewport1" runat="server" AutoScroll="True" Layout="FitLayout">          
                <Items>
    
    
    
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server" 
                Collapsible="true" 
                Width="600" 
                Height="350" 
                Title="Plants" 
                StoreID="Store1"
                Frame="true">
         
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Name" Header="Common Name" DataIndex="Name" Width="200" />
                        <ext:TemplateColumn>
                            <Template runat="server">
                                <Html>
                                    <div style='background-color:red;'>This is a test</div>
                                </Html>
                            </Template>
                        </ext:TemplateColumn>
                    </Columns>
                </ColumnModel>
                <LoadMask ShowMask="true" />
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
            </ext:GridPanel>
                    
                </Items>
            </ext:Viewport>
    
    
    </form>
    </body>
    </html>
    Last edited by Daniil; May 18, 2015 at 8:19 AM. Reason: [CLOSED]
  2. #2
    Hi @Z,

    Please clarify do you need to make red just all the cells in that column and conditionally (some red, some not)?
  3. #3
    I want it based on the template. In the example, it is by column.... But I also need it by row (or by cell)

    If I can do it based on the template.... My record data will determine the color.

    My record has "record.data.foregroundColor" and "record.data.backgroundColor" for every cell. This allows the full flexibility.

    /Z
  4. #4
    Thank you for clarifying.

    All the source code of a TemplateColumn is:
    Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
        /**
         * @cfg {String/XTemplate} tpl
         * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a
         * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
         */
        constructor: function(cfg){
            Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
            var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);
            this.renderer = function(value, p, r){
                return tpl.apply(r.data);
            };
            this.tpl = tpl;
        }
    });
    You could either override it to use a renderer's metadata argument as well or use a regular Column defining a Template separately.
  5. #5
    Which is the cleanest and easiest to deal with when upgrading to ext.net v3?

    Also, can you provide small example (of best choice) based on my initial example. i dislike modifying the base code as i dont have 100% understanding of all aspects.

    thanks
    /Z
  6. #6
    I would probably implement it like that.

    Example
    <%@ Page Language="C#" %>
    
    <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[] { "test1", "yellow" },
                    new object[] { "test2", "green" },
                    new object[] { "test3", "blue" },
                };
                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 myRenderer = function (value, metaData, record) {
                metaData.attr = "style='background-color:" + record.data.color + "';";
    
                if (!this.tpl) {
                    this.tpl = new Ext.XTemplate("<div>{test}</div>");
                }
    
                return this.tpl.apply(record.data);
            };
        </script>
    </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="test" />
                                    <ext:RecordField Name="color" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test">
                            <Renderer Fn="myRenderer" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7
    Thank you. I will do it like that. Can there be a feature request to allow TemplateColumn to call the renderer or is this not possible and we should just the example below in future.
    /Z
  8. #8
    It might be a feature request, but there might be a confusion.

    A Renderer returns some value to be rendered. So, a developer's Renderer should return a value and the internal TemplateColumn's Renderer returns a value. What to choose? Well, not a big problem, I agree. But at this time I would say that a TemplateColumn doesn't support a custom Renderer. If any more logic is need, it is best to use a regular Column.
  9. #9
    ok. thxs for help
    /Z

Similar Threads

  1. [CLOSED] Grid cell refresh and change column background color
    By chinninani in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 29, 2013, 3:30 PM
  2. [CLOSED] Gridpanel cell background color
    By mis@adphk.com in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 13, 2013, 2:00 AM
  3. Replies: 3
    Last Post: Feb 14, 2013, 10:35 AM
  4. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  5. 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

Posting Permissions