[CLOSED] How to make row expander default to expand all rows in grid panel?

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] How to make row expander default to expand all rows in grid panel?

    Hi,

    I am using Row Expander plugin in GridPanel. I want to expand all rows while page loading. Can you please let me know how to do it.
    Last edited by Daniil; Apr 20, 2012 at 6:43 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please add the following listener to the store
    <Load Handler="#{GridPanel1}.getRowExpander().expandAll();" Delay="100" Single="true" />
  3. #3
    Hi Vladimir,

    I have added the following listener to store, but still it is not expanding. I have removed Single="true" then all rows are expanding as default. The grid has multiheader. While loading the grid by selecting some filters from grid header, some items are expanding and some rows are not expanding, but all rows are showing expand symbol('_') in front of the row. Is it required to increase Delay paramenter?
    Click image for larger version. 

Name:	RowExpander.PNG 
Views:	345 
Size:	23.5 KB 
ID:	4105
    Quote Originally Posted by Vladimir View Post
    Hi,

    Please add the following listener to the store
    <Load Handler="#{GridPanel1}.getRowExpander().expandAll();" Delay="100" Single="true" />
  4. #4
    Please try to set up this
    <DataChanged Handler="#{GridPanel1}.getRowExpander().expandAll();" Delay="100" />
    listener for the Store.
  5. #5
    Yes Daniil,

    I have tried with that listener also along with load listener, but still some rows are showing as in my screenshot. Actually I need to show the the data information always in expand mode. Instead of rowexpander, Is there any other way to show the information as in screenshot . I don't need to show even expand / collapse (+ / - symbols) also. I need to show all data values in a row and the comment needs to show below those data values and spread across all columns based on comment length, like 3rd and 4th data display.

    Quote Originally Posted by Daniil View Post
    Please try to set up this
    <DataChanged Handler="#{GridPanel1}.getRowExpander().expandAll();" Delay="100" />
    listener for the Store.
  6. #6
    I was unable to reproduce the problem using the example below.

    Please provide your sample.

    Example
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        class Product
        {
            public string Name { get; set; }
            public List<Traveller> Travellers { get; set; }
        }
     
        class Traveller
        {
            public string Name { get; set; }
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                 
                Traveller t1 = new Traveller() { Name = "Traveller1" };
                Traveller t2 = new Traveller() { Name = "Traveller2" };
                Traveller t3 = new Traveller() { Name = "Traveller3" };
                 
                store.DataSource = new object[] 
                { 
                    new Product()
                    {
                        Name = "Product 1",
                        Travellers = new List<Traveller>() { t1, t2, t3}
                    },
                    new Product()
                    {
                        Name = "Product 2",
                        Travellers = new List<Traveller>() { t1, t2}
                    },
                    new Product()
                    {
                        Name = "Product 3",
                        Travellers = new List<Traveller>() { t2, t3}
                    }
                };
                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 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="Name" />
                                <ext:RecordField Name="Travellers" IsComplex="true" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <Listeners>
                        <DataChanged Handler="GridPanel1.getRowExpander().expandAll();" Delay="10" />
                    </Listeners>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Product" DataIndex="Name" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowExpander runat="server">
                    <Listeners>
                        <BeforeCollapse Handler="return false;" />
                    </Listeners>
                    <Template runat="server">
                        <Html>
                            <tpl for="Travellers">
                                <div>{Name}</div>
                            </tpl>
                        </Html>
                    </Template>
                </ext:RowExpander>
            </Plugins>
            <Listeners>
                <ViewReady Handler="this.getColumnModel().setHidden(0, true);" />
            </Listeners>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Filter">
            <Listeners>
                <Click Handler="GridPanel1.getStore().filter('Name', 'Product 1');" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Clear filter">
            <Listeners>
                <Click Handler="GridPanel1.getStore().clearFilter();" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
    I don't need to show even expand / collapse (+ / - symbols) also.
    Please see the GridPanel ViewReady listener in the example above.
  7. #7
    Hi Daniil,

    Here is my example code. Just click the button at the bottom to reload entire grid. Please click at least twice, so that you can get the screen which will show all rows in collapse and row expander symbol is showing ('-'). The grid should always in expand mode irrespective number of clicks on the button.

    
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ExtRowExpanderTest3.aspx.vb"
        Inherits="Testing_ExtRowExpanderTest3" %>
    
    <%@ 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 id="Head1" runat="server">
        <title></title>
        <link href="../css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="storeComments" runat="server">
            <Reader>
                <ext:JsonReader IDProperty="RECORD_ID">
                    <Fields>
                        <ext:RecordField Name="RECORD_ID" />
                        <ext:RecordField Name="COMMENT" />
                        <ext:RecordField Name="COMMENT_BY" />
                        <ext:RecordField Name="COMMENT_TYPE" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <Listeners>
                <DataChanged Handler="#{grdLoansSummary}.getRowExpander().expandAll();" Delay="10" />
            </Listeners>
        </ext:Store>
        <ext:Viewport ID="Viewport1" runat="server" StyleSpec="bg" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="pnlCmts" runat="server" Region="Center" Layout="BorderLayout">
                    <Items>
                        <ext:GridPanel ID="grdLoansSummary" runat="server" StoreID="storeComments" StripeRows="true"
                            AutoExpandColumn="COMMENT_TYPE" AutoExpandMax="5000" Height="280" Region="Center">
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                            </SelectionModel>
                            <Plugins>
                                <ext:RowExpander ID="RowExpander1" runat="server">
                                    <Template ID="Template2" runat="server">
                                        <Html>
                                            <p><b>Comment:</b><br> {COMMENT}</p>
                                        </Html>
                                    </Template>
                                </ext:RowExpander>
                            </Plugins>
                            <ColumnModel ID="ColumnModel4" runat="server">
                                <Columns>
                                    <ext:Column ColumnID="RECORDID" Header="RECORD ID" DataIndex="RECORD_ID" Width="100">
                                    </ext:Column>
                                    <ext:Column ColumnID="COMMENTBY" Header="User" DataIndex="COMMENT_BY" Width="100">
                                    </ext:Column>
                                    <ext:Column ColumnID="COMMENTTYPE" Header="Comment type" DataIndex="COMMENT_TYPE">
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                    <Buttons>
                        <ext:Button ID="btnRefresh" runat="server" Text="Reload Data">
                            <DirectEvents>
                                <Click OnEvent="ReloadGridInfo">
                                    <EventMask ShowMask="true" Msg="Loading..." MinDelay="1000" />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                    </Buttons>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    code behind...

    Imports Ext.Net
    Partial Class Testing_ExtRowExpanderTest3
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            If Not Ext.Net.X.IsAjaxRequest Then
                Call LoadAllComments()
            End If
        End Sub
    
        Public Sub LoadAllComments()
            storeComments.DataSource = GetAllCommentsData()
            storeComments.DataBind()
        End Sub
    
        Private Function GetAllCommentsData() As DataTable
            Dim dt As New DataTable
            Dim dr As DataRow
            Dim i As Integer
    
            dt.Columns.Add("RECORD_ID")
            dt.Columns.Add("COMMENT")
            dt.Columns.Add("COMMENT_BY")
            dt.Columns.Add("COMMENT_TYPE")
    
    
            For i = 0 To 10
    
                dr = dt.NewRow()
                dr(0) = Format(i, "00000000")
                dr(1) = "Status Info " & i.ToString()
                dr(2) = "User " & i.ToString()
                dr(3) = "Type " & i.ToString()
                dt.Rows.Add(dr)
    
            Next
    
            Return dt
    
        End Function
    
        Public Sub ReloadGridInfo(ByVal sender As Object, ByVal e As DirectEventArgs)
            Call LoadAllComments()
        End Sub
    End Class
  8. #8
    Thanks for the example.

    Please use:
    <DataChanged Handler="#{grdLoansSummary}.getRowExpander().collapseAll(); 
                            #{grdLoansSummary}.getRowExpander().expandAll();" 
                    Delay="10" />
    Regarding the example.

    Please place code behind into
    <script runat="server">
        //code behind
    </script>
    directly on a page.

    It would be a great help for us.

    So, you example can look the following way that allows us to just copy, paste and run.

    Example
    <%@ Page Language="VB" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <%@ Import Namespace="System.Data" %>
    
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            If Not Ext.Net.X.IsAjaxRequest Then
                Call LoadAllComments()
            End If
        End Sub
     
        Public Sub LoadAllComments()
            storeComments.DataSource = GetAllCommentsData()
            storeComments.DataBind()
        End Sub
     
        Private Function GetAllCommentsData() As DataTable
            Dim dt As New DataTable
            Dim dr As DataRow
            Dim i As Integer
     
            dt.Columns.Add("RECORD_ID")
            dt.Columns.Add("COMMENT")
            dt.Columns.Add("COMMENT_BY")
            dt.Columns.Add("COMMENT_TYPE")
     
     
            For i = 0 To 10
     
                dr = dt.NewRow()
                dr(0) = Format(i, "00000000")
                dr(1) = "Status Info " & i.ToString()
                dr(2) = "User " & i.ToString()
                dr(3) = "Type " & i.ToString()
                dt.Rows.Add(dr)
     
            Next
     
            Return dt
     
        End Function
     
        Public Sub ReloadGridInfo(ByVal sender As Object, ByVal e As DirectEventArgs)
            Call LoadAllComments()
        End Sub
    </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 Example</title>
    </head>
    <body>
        <%--MARKUP--%>
    </body>
    </html>
  9. #9
    Hi, i have the same issue. Can you help me pls ? I've tryied to use your hint but without success.
    There's something else that i can do ?

                    <Store>
                        <ext:Store ID="storeAP" runat="server" RemoteSort="true" OnRefreshData="storeAP_RefreshData">
                            <Proxy>
                                <ext:PageProxy />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader IDProperty="Id">
                                    <Fields>
                                        <ext:RecordField Name="Id" Type="Int" />
                                        <ext:RecordField Name="Type" Type="String" />
                                        <ext:RecordField Name="Date" Type="Date" />
                                        <ext:RecordField Name="Description" Type="String" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <Listeners>
                            <DataChanged Handler="#{gridPanelAP}.getRowExpander().collapseAll(); #{gridPanelAP}.getRowExpander().expandAll();"
                                    Delay="10" />
                            </Listeners>
                        </ext:Store>
                    </Store>

    Quote Originally Posted by Daniil View Post
    Thanks for the example.

    Please use:
    <DataChanged Handler="#{grdLoansSummary}.getRowExpander().collapseAll(); 
                            #{grdLoansSummary}.getRowExpander().expandAll();" 
                    Delay="10" />
    Regarding the example.

    Please place code behind into
    <script runat="server">
        //code behind
    </script>
    directly on a page.

    It would be a great help for us.

    So, you example can look the following way that allows us to just copy, paste and run.

    Example
    <%@ Page Language="VB" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <%@ Import Namespace="System.Data" %>
    
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
            If Not Ext.Net.X.IsAjaxRequest Then
                Call LoadAllComments()
            End If
        End Sub
     
        Public Sub LoadAllComments()
            storeComments.DataSource = GetAllCommentsData()
            storeComments.DataBind()
        End Sub
     
        Private Function GetAllCommentsData() As DataTable
            Dim dt As New DataTable
            Dim dr As DataRow
            Dim i As Integer
     
            dt.Columns.Add("RECORD_ID")
            dt.Columns.Add("COMMENT")
            dt.Columns.Add("COMMENT_BY")
            dt.Columns.Add("COMMENT_TYPE")
     
     
            For i = 0 To 10
     
                dr = dt.NewRow()
                dr(0) = Format(i, "00000000")
                dr(1) = "Status Info " & i.ToString()
                dr(2) = "User " & i.ToString()
                dr(3) = "Type " & i.ToString()
                dt.Rows.Add(dr)
     
            Next
     
            Return dt
     
        End Function
     
        Public Sub ReloadGridInfo(ByVal sender As Object, ByVal e As DirectEventArgs)
            Call LoadAllComments()
        End Sub
    </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 Example</title>
    </head>
    <body>
        <%--MARKUP--%>
    </body>
    </html>
  10. #10
    Hi,

    Please provide a full example to reproduce the problem.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: Oct 09, 2013, 10:19 AM
  2. Row Expander does not expand
    By Ivens Correa in forum 1.x Help
    Replies: 2
    Last Post: Oct 08, 2010, 1:20 PM
  3. Replies: 11
    Last Post: Apr 08, 2010, 1:36 PM
  4. [CLOSED] Grid Panel editor combobox default value
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 08, 2009, 8:38 AM
  5. Grid panel rows
    By snow_cap in forum 1.x Help
    Replies: 3
    Last Post: Aug 09, 2009, 6:21 PM

Tags for this Thread

Posting Permissions