What's New?

[CLOSED] Expand/Collapse a group in groupCommand

  1. #1
    Mar 26, 2013, 9:32 AM

    [CLOSED] Expand/Collapse a group in groupCommand

    Hi,

    I have a grouped grid that uses a menu item to select/deselect all children of a group.
    If the user selects all, I would like to expand the group, if he deselects all I would like to collapse the group.
    I have seen an example in the forum where I need to pass a group name as a string, but my groupnames are created dynamically based upon search results.

    So this is how I have thought it would work, but it doesnt work.
    expand does not throw an exception, but nothing happens.
    collapse throws: Uncaught TypeError: Cannot call method 'addCls' of null 

             var onGroupCommand = function (column, command, group) {
             if (command === 'SelectAll') {
                 column.grid.getSelectionModel().select(group.children, true, true);
                 column.grid.features[0].expand(group);
                 return;
             } else if (command === 'SelectNone') {
                 column.grid.getSelectionModel().deselect(group.children, true, true);
                 column.grid.features[0].collapse(group);
                 return;
             }
    So whats the right way here?
    Last edited by Daniil; Apr 02, 2013 at 4:07 AM. Reason: [CLOSED]
  2. #2
    Mar 26, 2013, 11:28 AM
    Hi @blueworld,

    The collapse and expand methods expects a group's name.
    http://docs.sencha.com/ext-js/4-2/#!...-method-expand
    http://docs.sencha.com/ext-js/4-2/#!...ethod-collapse

    So, please pass "group.name" instead of "group".

    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>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var onGroupCommand = function (column, command, group) {
            var sm = column.grid.getSelectionModel(),
                groupingFeafure = column.grid.groupingFeature;

            if (command === 'SelectAll') {
                sm.select(group.children, true);
                groupingFeafure.expand(group.name);
            } else if (command === 'SelectNone') {
                sm.deselect(group.children, true);
                groupingFeafure.collapse(group.name);
            }
        };
    </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" />
                    <ext:ImageCommandColumn runat="server" Hidden="true">
                        <GroupCommands>
                            <ext:GroupImageCommand CommandName="SelectAll" Text="SelectAll" />
                            <ext:GroupImageCommand CommandName="SelectNone" Text="SelectNone" />
                        </GroupCommands>
                        <Listeners>
                            <GroupCommand Fn="onGroupCommand" />
                        </Listeners>
                    </ext:ImageCommandColumn>
                </Columns>
            </ColumnModel>
            <Features>
                <ext:Grouping runat="server" />
            </Features>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Simple" />
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Sep 22, 2014, 8:44 AM
    Any luck ?
  4. #4
    Sep 22, 2014, 12:49 PM
    Please clarify with what?

Similar Threads

  1. [CLOSED] [#88] How to expand/collapse a grid group in client side
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 20
    Last Post: Jun 03, 2013, 3:52 PM
  2. [CLOSED] Expand / Collapse Grid group in client side - Razor
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 31, 2012, 12:52 PM
  3. [CLOSED] FieldSet graphic (icon for expand / collapse) bottom border line is not showing in google chrome while collapse.
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 11, 2011, 11:07 AM
  4. expand/collapse all portlet on the form
    By boroda in forum 1.x Help
    Replies: 2
    Last Post: Jun 17, 2011, 5:32 PM
  5. [CLOSED] Collapse/Expand reloads on FF
    By george in forum 1.x Help
    Replies: 7
    Last Post: May 05, 2011, 8:32 PM

Tags for this Thread

Posting Permissions