What's New?

[CLOSED] [#88] How to expand/collapse a grid group in client side

Page 1 of 3 123 LastLast
  1. #1
    Apr 30, 2012, 1:20 PM

    [CLOSED] [#88] How to expand/collapse a grid group in client side

    Hello

    In my first application version in Ext.NET 1.3 I have this code to toggle one of the group of my grids :

    var toggleGroupByValue = function ( gridName, groupValue )
{
    var grid;
    var store;
    var view;
    var groupField;
    var index;
    try
    {

        grid = Ext.getCmp( gridName );
        store = grid.getStore();
        view = grid.getView();
        groupField = store.groupField;
        store.each( function ( record, i )
        {
            if ( record.data[groupField] == groupValue )
            {
                index = i;
                return false;
            }
        } );
        grid.toggleRowIndex( index, true );
    }
    catch ( Error )
    {
    }
};
    Problem is that this code didn't work since Ext.JS 4.0 because toggleRowIndex has disapeared.

    I found the expand and collapse method on the Ext.grid.feature.Grouping, but I didn't found how to get the feature from the grid (in fact I found this: myGrid.features[0] but I did not kow if this is the good object and can't call collapse or expand with it)

    I start all my group collapsed and I want to expand the one chosen.

    In the function, all works well, expet the toggleRowIndex (of course)
    Last edited by Daniil; Jun 03, 2013 at 3:53 PM. Reason: [CLOSED]
  2. #2
    Apr 30, 2012, 3:11 PM
    Hi,

    This is how I would achieve the requirement in Ext.NET v2.

    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 v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <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 ID="Grouping1" runat="server" StartCollapsed="true" />
        </Features>
        <Listeners>
            <%--Workaround--%>
            <ViewReady Handler="this.features[0].collapseAll();" />
        </Listeners>
    </ext:GridPanel>

    <ext:Button 
        runat="server" 
        Text="Expand the first group">
        <Listeners>
            <Click Handler="#{Grouping1}.expand('group1');" />
        </Listeners>    
    </ext:Button>

    <ext:Button 
        runat="server" 
        Text="Expand the second group">
        <Listeners>
            <Click Handler="#{GridPanel1}.features[0].expand('group2');" />
        </Listeners>    
    </ext:Button>
</body>
</html>
    Please note that the Viewready listener is marked "Workaround", because there is a bug (I think it's a bug), which I have reported to ExtJS.
    http://www.sencha.com/forum/showthread.php?199925
  3. #3
    Apr 30, 2012, 3:46 PM
    Thanks, I will dig in and report
  4. #4
    May 01, 2012, 4:05 PM
    The ExtJS team has opened the bug.

    When it will be fixed you can remove the workaround with the ViewReady listener.

    I will notify updating the current thread.
  5. #5
    May 02, 2012, 12:32 PM
    It works perfectly

    Thanks
  6. #6
    May 02, 2012, 1:49 PM
    Hello

    I think it is another problem with the 
    StartCollapsed="true"
    feature, because, when I use it and I want to ad datat to my grid, the data is added collapsed and the editor is not opened. If I use your workaround code, it works normally.
  7. #7
    May 02, 2012, 2:01 PM
    Yes, I think these problems has the same root and should be fixed together.
  8. #8
    May 02, 2012, 2:02 PM
    OK, just wait
  9. #9
    May 04, 2012, 8:51 AM
    Hello

    each time I change panel to show grid, I execute this function : 
     grid.features[0].expand( groupValue );
    and I have the error message :
    Uncaught TypeError: undefined is not a function
    If I run it by hand in javascript console, it executes but it answer undefined:

    "Click image for larger version.  Name: erro.png  Views: 185  Size: 18.8 KB  ID: 4195"

    The javascript function called :

    var toggleGroupByValue = function ( grid, groupValue )
{
    var grid = Ext.getCmp( grid ); ;

    grid.features[0].expand( groupValue );

};
    it is called from code behind when I change panel :

      
Private Sub RefreshGrid(ByVal STR_Grid As String, ByVal STR_EntityName As String)
        Ext.Net.X.Call("toggleGroupByValue('" + STR_Grid + "','" + STR_EntityName + "')")
End Sub
  10. #10
    May 04, 2012, 12:12 PM
    Could you provide a full sample to reproduce?

    Is the "STR_Grid" client id of the GridPanel?
Page 1 of 3 123 LastLast

Similar Threads

  1. [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
  2. [CLOSED] Collapse/Expand reloads on FF
    By george in forum 1.x Help
    Replies: 7
    Last Post: May 05, 2011, 8:32 PM
  3. why is GridPanel collapse and expand unable ?
    By netcooliteuser in forum 1.x Help
    Replies: 7
    Last Post: Sep 09, 2010, 4:57 PM
  4. Tree "Expand All" and "Collapse All" icons
    By daneel in forum 1.x Help
    Replies: 1
    Last Post: Mar 18, 2010, 1:11 PM
  5. Grid Client Transactions(Client side insert/edit/delete)
    By kumarxlnt in forum 1.x Help
    Replies: 0
    Last Post: Sep 17, 2009, 8:04 AM

Posting Permissions