HeaderGroupColumn Hiding

  1. #1

    HeaderGroupColumn Hiding

    Is it possible to have a menu attached to the HeaderGroupColumn and thus hide all the columns underneath it? For example could a menu be attached to the "Active Component" header column that will hide all three columns underneath it?

    Click image for larger version. 

Name:	TrackMouseOver.v02.jpg 
Views:	206 
Size:	71.3 KB 
ID:	3646
  2. #2
    Hi,

    There is no such built-in functionality.

    I can suggest the following way to achieve the requirement.

    Example
    <%@ Page Language="C#" %>
     
    <%@ 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 runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var onContextMenu = function (e, grid, menu) {
                var t = e.getTarget(".ux-grid-hd-group-cell");
                if (t) {
                    var groupHeader = t.childNodes[0].childNodes[1].nodeValue;
                    e.stopEvent();
                    menu.grid = grid;
                    menu.groupHeader = groupHeader;
                    menu.show(e.getTarget());
                }
            };
    
            var onHideAllClick = function (menuItem, e) {
                var menu = menuItem.parentMenu,
                    cm = menu.grid.getColumnModel(),
                    indexes,
                    i;
    
                switch (menu.groupHeader) {
                    case "Group 1":
                        indexes = [0, 1];
                        break;
                    case "Group 2":
                        indexes = [2, 3];
                        break;
                }
    
                for (i = 0; i < indexes.length; i++) {
                    cm.setHidden(indexes[i], true);
                }
            };
        </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="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                    <ext:RecordField Name="test4" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                        <ext:Column Header="Test4" DataIndex="test4" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server">
                        <HeaderGroupRows>
                            <ext:HeaderGroupRow>
                                <Columns>
                                    <ext:HeaderGroupColumn Header="Group 1" ColSpan="2" Tooltip="Right click" />
                                    <ext:HeaderGroupColumn Header="Group 2" ColSpan="2" Tooltip="Right click" />
                                </Columns>
                            </ext:HeaderGroupRow>
                        </HeaderGroupRows>
                    </ext:GridView>
                </View>
                <Listeners>
                    <ContextMenu Handler="onContextMenu(e, this, Menu1);" />
                </Listeners>
            </ext:GridPanel>
            <ext:Menu ID="Menu1" runat="server">
                <Items>
                    <ext:MenuItem Text="Hide all">
                        <Listeners>
                            <Click Fn="onHideAllClick" />
                        </Listeners>
                    </ext:MenuItem>
                </Items>
            </ext:Menu>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 03, 2012 at 4:10 AM.
  3. #3
    Thank you for all of your help. What you provided works, but is not exactly what I would want. It turns out that EXT JS 4.0 does implement the exact solution I would like and thus I hope that EXT.NET 2.0 will also implement it.

    EXT JS 4.0 Group Header Grid

    The Stock Price header over the Price, Change and % Change headers allow all 3 columns to be hidden with a nice drop down menu.
    Last edited by cwolcott; Jan 03, 2012 at 2:39 PM. Reason: Additional Info
  4. #4
    Yes, this functionality will be presented in Ext.NET v2.

Similar Threads

  1. Row spanned HeaderGroupColumn.
    By Sergey Leskov in forum 1.x Help
    Replies: 3
    Last Post: Aug 26, 2011, 12:00 PM
  2. [CLOSED] HeaderGroupColumn and column grouping
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 27, 2010, 4:35 PM
  3. Add controls to headergroupcolumn
    By Birgit in forum 1.x Help
    Replies: 3
    Last Post: Nov 26, 2010, 7:51 AM
  4. [CLOSED] Hiding CheckBoxGroups
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 26, 2010, 9:23 PM
  5. [CLOSED] hide HeaderGroupColumn
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 04, 2010, 2:45 PM

Tags for this Thread

Posting Permissions