[CLOSED] Change text in header group column.

  1. #1

    [CLOSED] Change text in header group column.

    Hi,

    How do I change the text of the group header using DirectMethod? If it was in the column on the grid I would use the .SetColumnHeader(index, text), but to change the header text of the group?

    See attached file to understand better.
    Click image for larger version. 

Name:	quadro_insumos.jpg 
Views:	381 
Size:	39.5 KB 
ID:	2400


    Thanks.
    Last edited by Daniil; Mar 15, 2011 at 8:31 AM. Reason: [CLOSED]
  2. #2
    Hi,

    There is no server side method to change a group's header.

    Also, I can't see a client side method also.

    Well, group's headers are provided by the plugin, it means that it could not have a big API.

    It would be best to investigate the plugin's sources to see how we can change a group's header via JavaScript.

    In DirectMethod please use
    X.Js.AddScript(script)
  3. #3
    Hi, Daniil.

    I found that can be done via javascript like this:

    myGrid.view.headerGroupRows[0][1].header = "Atual 1";
    myGrid.view.headerGroupRows[0][2].header = "Atual 2";
    myGrid.view.headerGroupRows[0][3].header = "Atual 3";
    myGrid.view.headerGroupRows[0][4].header = "Atual 4";
    myGrid.view.render();
    myGrid.load();
    Thanks for help.
  4. #4
    Please look at the way how to achieve your requirement without re-rendering and re-loading, because these actions can be very expensive.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var structure = new Dictionary<string, string[]>
                {
                    { "Asia", new string[] {"Beijing", "Tokyo"} },
                    { "Europe", new string[] {"Berlin", "London", "Paris"} }
                };
    
                var products = new string[] { "ProductX", "ProductY" };
                var grid = GridPanel1;
                var view = grid.View[0];
                var store = grid.Store[0];
                var cm = grid.ColumnModel;
                var continentGroupRow = new HeaderGroupRow();
                var cityGroupRow = new HeaderGroupRow();
                var data = new object[5];
                var i = 0;
                var random = new Random();
    
                foreach (KeyValuePair<string, string[]> keyValuePair in structure)
                {
                    var continent = keyValuePair.Key;
                    var cities = keyValuePair.Value;
    
                    continentGroupRow.Columns.Add(new HeaderGroupColumn
                    {
                        Header = continent,
                        Align = Alignment.Center,
                        ColSpan = cities.Length * products.Length
                    });
    
                    foreach (string city in cities)
                    {
                        cityGroupRow.Columns.Add(new HeaderGroupColumn
                        {
                            Header = city,
                            ColSpan = products.Length,
                            Align = Alignment.Center
                        });
    
                        foreach (string product in products)
                        {
                            store.Reader[0].Fields.Add(city + product, RecordFieldType.Int);
    
                            cm.Columns.Add(new Column
                            {
                                DataIndex = city + product,
                                Header = product,
                                Renderer =
                                {
                                    Format = RendererFormat.UsMoney
                                }
                            });
                        }
    
                        var arr = new int[20];
    
                        for (int j = 0; j < 20; j++)
                        {
                            arr[j] = Convert.ToInt32((Math.Floor(random.NextDouble() * 11) + 1) * 100000);
                        }
    
                        data[i++] = arr;
                    }
                }
    
                view.HeaderGroupRows.Add(continentGroupRow);
                view.HeaderGroupRows.Add(cityGroupRow);
    
                store.DataSource = data;
                store.DataBind();
            }
        }
    
        [DirectMethod]
        public string SetHeader(int row, int column)
        {
            string header = "";
            if (row == 1 && column == 1)
            {
                header = "New Tokyo";
            }
            else if (row == 1 && column == 3)
            {
                header = "New London";
            }
            else
            {
                header = "Default";
            }
            return header;
        }
    </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>Grid Column Header Grouping - Ext.NET Examples</title>
    
        <script type="text/javascript">
            var changeHeader = function(grid, row, column, newHeader) {
                grid.view.headerGroupRows[row][column].header = newHeader;
    
                var rows = grid.view.mainHd.select(".x-grid3-hd-row", true).elements,
                    tds = rows[row].select("td", true).elements;
                tds[column].child("div").dom.lastChild.nodeValue = newHeader;
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StripeRows="true" 
            Title="Sales By Region"
            TrackMouseOver="true" 
            Width="1000" 
            Height="400">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <View>
                <ext:GridView runat="server" ForceFit="true" />
            </View>
        </ext:GridPanel>
        
        <ext:Button runat="server" Text="Change Asia to New Asia">
            <Listeners>
                <Click Handler="changeHeader(GridPanel1, 0, 0, 'New Asia');" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Change Europe to New Europe">
            <Listeners>
                <Click Handler="changeHeader(GridPanel1, 0, 1, 'New Europe');" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Change Beijing to New Beijing">
            <Listeners>
                <Click Handler="changeHeader(GridPanel1, 1, 0, 'New Beijing');" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Change Tokyo to New Tokyo (DirectMethod)">
            <Listeners>
                <Click Handler="Ext.net.DirectMethods.SetHeader(1, 1, {
                                    success : function (result) {
                                        changeHeader(GridPanel1, 1, 1, result);   
                                    }
                                });" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Change Tokyo to New Tokyo (DirectMethod)">
            <Listeners>
                <Click Handler="Ext.net.DirectMethods.SetHeader(1, 3, {
                                    success : function (result) {
                                        changeHeader(GridPanel1, 1, 3, result);   
                                    }
                                });" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
  5. #5
    Hi, Daniil.

    So resolved.

    var changeHeader = function(grid, newHeader) {
          var rows = grid.view.mainHd.select(".x-grid3-hd-row", true).elements,
          tds = rows[0].select("td", true).elements;
          tds[1].child("div").dom.lastChild.nodeValue = "Atual 1";
          tds[2].child("div").dom.lastChild.nodeValue = "Atual 2";
          tds[3].child("div").dom.lastChild.nodeValue = "Atual 3";
          tds[4].child("div").dom.lastChild.nodeValue = "Atual 4";
    }
    Very thanks.

Similar Threads

  1. [FIXED] [1.6] Header Group Column layout bug
    By ascsolutions in forum Bugs
    Replies: 11
    Last Post: Aug 30, 2012, 1:20 PM
  2. [CLOSED] Column header text style
    By Stefanaccio in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 03, 2011, 11:03 AM
  3. [CLOSED] [1.0] Grid column header group - span multiple rows
    By Neil_Walters in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 15, 2011, 12:11 AM
  4. group header text multiline problem
    By wp_joju in forum 1.x Help
    Replies: 0
    Last Post: Dec 21, 2010, 11:54 AM
  5. [CLOSED] Changind Column Header Text in AjaxRequest
    By amitpareek in forum 1.x Premium Help
    Replies: 11
    Last Post: Feb 02, 2010, 3:34 PM

Tags for this Thread

Posting Permissions