[CLOSED] Gridpanel - group header - Dyamically change background color

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Gridpanel - group header - Dyamically change background color

    Hi,
    We have a grid panel which has a grouped column.
    We wish to dynamically change group headers background color as per one of the columns value.
    Last edited by Daniil; Jul 24, 2013 at 1:26 PM. Reason: [CLOSED]
  2. #2
    Hi @PriceRightHTML5team,

    Maybe, this way.

    <style>
        .my-grouped-header {
            background-color: green;
            background-image: none;
        }
    </style>
    var c = App.GridPanel1.groupingFeature.getGroupedHeader();
    
    c.addCls('my-grouped-header');
    //c.removeCls('my-grouped-header');
  3. #3
    Hi Daniil

    The color is to be set as per a columns value for that respective record in the store.
    Thus, where can we write the script / code (on which event)? We want the color be shown on page load.

    We are using Asp.Net MVC razor engine.

    Also how to access the group header for each record.
    Last edited by PriceRightHTML5team; Jul 19, 2013 at 11:34 AM.
  4. #4
    Please try a GridPanel's ViewReady listener.
  5. #5
    But how to access each group header individually. considering it's member records
  6. #6
    I don't quite understand. Please elaborate.
  7. #7
    Hi Daniil


    I wish to know a mechanism using which I can travers the groups and it's records of a gridpanel

    in that I will be checking for each record's certain column value and set the css class accordingly for eg;
    if (App.Gridnm.store.getAt(i).get('Isxcolumn') == true) {          
                   groupheader.addCls('my-grouped-headerX');
                }
    else{
               groupheader.addCls('my-grouped-headerY');
    }
    Hope this makes it understandable.
  8. #8
    There is a single group header for all the groups. You are talking about headers for each groups. So, we are probably talking about the different things.

    Please provide a screenshot with circled things which you need to change the background of.
  9. #9
    Click image for larger version. 

Name:	grid.png 
Views:	70 
Size:	20.8 KB 
ID:	6581

    Yes there is one group header. Attached is the snapshot of the grid.
    I have marked the group header row which is to be colored with red border.
  10. #10
    For this requirement I think you should use a Grouping's GroupHeaderTpl.

    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" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <style>
            .highlight-group {
                background-color: red;
            }
        </style>
    
        <script>
            var isX = function (groupValue, records) {
                var i,
                    isX = groupValue === "group2" ? true : false; // just for demonstration
    
                for (i = 0; i < records.length; i++) {
                    // here you are getting access to each record of a current group
                }
    
                return isX;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server" GroupField="groupId">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="groupId" />
                                    <ext:ModelField Name="test1" />
                                    <ext:ModelField Name="test2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="GroupId" DataIndex="groupId" />
                        <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                        <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                    </Columns>
                </ColumnModel>
                <Features>
                    <ext:Grouping runat="server">
                        <GroupHeaderTpl runat="server">
                            <Html>
                                <div <tpl if="this.isX(groupValue, children)" groupId === 'group2'">class="highlight-group"</tpl>>Group: {name}</div>
                            </Html>
                            <Functions>
                                <ext:JFunction Name="isX" Fn="isX" />
                            </Functions>
                        </GroupHeaderTpl>
                    </ext:Grouping>
                </Features>
            </ext:GridPanel>
        </form>
    </body>
    </html>
Page 1 of 2 12 LastLast

Similar Threads

  1. Change GridPanel Cell background color
    By mis@adphk.com in forum 2.x Help
    Replies: 1
    Last Post: Mar 19, 2013, 1:43 AM
  2. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  3. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  4. Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Tags for this Thread

Posting Permissions