[CLOSED] Displaying different background and font colors for each grouping

  1. #1

    [CLOSED] Displaying different background and font colors for each grouping

    Hello,

    Is it possible to assign each grouping a different background color in a GridPanel?
    Below is my setup of a GridPanel:

    <ext:GridPanel ID="GridPanel1" runat="server" > <View>                                                 <ext:GroupingView ID="GroupingView1" runat="server" HideGroupedColumn="true" HeadersDisabled="true"                                                    StandardHeaderRow="false" StartCollapsed="false" GroupTextTpl="{[Ext.util.Format.date(values.rs[0].data.WrapStartDate, 'M-d-Y')]} ({[values.rs.length]} {[values.rs.length == 1 ? 'Run' : 'Runs']})">                                                 </ext:GroupingView>                                             </View>   </GridPanel>
    Last edited by Daniil; Jun 04, 2012 at 7:31 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I would use GetRowClass.
    http://docs.sencha.com/ext-js/3-4/#!...od-getRowClass

    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[] { "group1", "1", "1" },
                    new object[] { "group1", "11", "11" },
                    new object[] { "group1", "111", "111" },
                    new object[] { "group2", "2", "2" },
                    new object[] { "group2", "22", "22" },
                    new object[] { "group2", "222", "222" }
                };
                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 getRowClass = function (record, index, rowParams, store) {
                var cls = record.get(this.getGroupField());
    
                return cls;
            };
        </script>
    
        <style type="text/css">
            .group1 {
                background-color: green;
            }
            
            .group2 {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server" GroupField="groupId">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="groupId" />
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="GroupId" DataIndex="groupId" />
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GroupingView runat="server">
                    <GetRowClass Fn="getRowClass" />
                </ext:GroupingView>
            </View>
        </ext:GridPanel>
    </body>
    </html>
  3. #3
    Thanks for the reply.
    How would you make this work without hard coding the groups in the CSS?

    In my case, group1 and group2 are not known. My groups are a list of changing dates and I do not know what they are in advance. I can not hard code them.


    Quote Originally Posted by Daniil View Post
    Hi,

    I would use GetRowClass.
    http://docs.sencha.com/ext-js/3-4/#!...od-getRowClass

    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[] { "group1", "1", "1" },
                    new object[] { "group1", "11", "11" },
                    new object[] { "group1", "111", "111" },
                    new object[] { "group2", "2", "2" },
                    new object[] { "group2", "22", "22" },
                    new object[] { "group2", "222", "222" }
                };
                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 getRowClass = function (record, index, rowParams, store) {
                var cls = record.get(this.getGroupField());
    
                return cls;
            };
        </script>
    
        <style type="text/css">
            .group1 {
                background-color: green;
            }
            
            .group2 {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server" GroupField="groupId">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="groupId" />
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="GroupId" DataIndex="groupId" />
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GroupingView runat="server">
                    <GetRowClass Fn="getRowClass" />
                </ext:GroupingView>
            </View>
        </ext:GridPanel>
    </body>
    </html>
  4. #4
    You can register CSS on the fly.
    Ext.net.ResourceMgr.registerCssClass("someClassId", ".class-name {background-color: red;}");
  5. #5
    Thanks for your help. I found a work around for my date grouping feature. Below is my work around:
    <script type="text/javascript">
    var getRowClass = function(record, index, rowParams, store) {
                var cls = record.get(this.getGroupField());
                var d = new Date(cls);
                var aDay = d.getDay();
    
                switch (aDay) {
                    case 0:
                        cls = "clsSunday";
                        break;
                    case 1:
                        cls = "clsMonday";
                        break;
                    case 2:
                        cls = "clsTuesday";
                        break;
                    case 3:
                         cls = "clsWednesday";
                        break;
                    case 4:
                       cls = "clsThursday";
                        break;
                    case 5:
                         cls = "clsFriday";
                        break;
                    case 6:
                        cls = "clsSaturday";
                        break;
                } 
                
                return cls;
            }; 
    </script>
    Quote Originally Posted by Daniil View Post
    You can register CSS on the fly.
    Ext.net.ResourceMgr.registerCssClass("someClassId", ".class-name {background-color: red;}");
  6. #6
    Here is the related thread for Ext.NET v2.
    http://forums.ext.net/showthread.php?19816

Similar Threads

  1. Replies: 6
    Last Post: Jul 02, 2012, 1:17 PM
  2. Displaying different color for each grouping
    By extNewBee in forum 1.x Help
    Replies: 1
    Last Post: Jun 29, 2012, 12:17 PM
  3. Replies: 0
    Last Post: Sep 27, 2011, 10:24 AM
  4. [CLOSED] Alternating background colors of a listview row
    By mattwoberts in forum 1.x Premium Help
    Replies: 2
    Last Post: Mar 23, 2011, 2:35 PM
  5. [CLOSED] Panel Frame Style - Set Background and Font
    By iansriley in forum 1.x Premium Help
    Replies: 1
    Last Post: Jan 11, 2011, 4:26 PM

Tags for this Thread

Posting Permissions