What's New?

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

  1. #1
    May 30, 2012, 9:37 PM

    [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
    May 31, 2012, 11:40 AM
    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
    May 31, 2012, 1:44 PM
    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
    May 31, 2012, 1:47 PM
    You can register CSS on the fly.
    Ext.net.ResourceMgr.registerCssClass("someClassId", ".class-name {background-color: red;}");
  5. #5
    Jun 06, 2012, 8:40 PM
    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
    Jun 29, 2012, 12:16 PM
    Here is the related thread for Ext.NET v2.
    http://forums.ext.net/showthread.php?19816

Similar Threads

  1. [CLOSED] set background color for each grouping throws error message
    By Fahd in forum 2.x Legacy Premium Help
    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. Editable Grid Panel default style properties (font size and weight, header and cells background color, etc...)
    By garag in forum 1.x Help
    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 Legacy 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 Legacy Premium Help
    Replies: 1
    Last Post: Jan 11, 2011, 4:26 PM

Tags for this Thread

Posting Permissions