[CLOSED] Row expander with inner grid - Not expanding the first time

  1. #1

    [CLOSED] Row expander with inner grid - Not expanding the first time

    Hello,
    I used a VBox Panel to put 2 grids with row expander with inner grids.
    But the first time the page is loaded when I click on the [+] button is not opening , I need to click again to
    expand the row.
    Here is the code:

    <%@ Page Language="C#" AutoEventWireup="true"   %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
                if (!IsPostBack && !X.IsAjaxRequest)
            {
                    
    
    
            }
    
            //RowExpander Values
            this.CountriesStore.DataSource = new object[]
            {
                new object[] { "Countries"}              
            };
    
            this.CountriesStore.DataBind();
    
            this.CategoriesStore.DataSource = new object[]
            {
                new object[] { "Categories"}              
            };
    
            this.CategoriesStore.DataBind();
    
                
    
            InnerCategoriesStore.DataSource = new object[]
            {
                new { categories = "category1"},
                new { categories = "category2"}               
            };
    
            InnerCategoriesStore.DataBind();
               
        }
    
    
    
        protected void InnerCountriesStore_ReadData(object sender, StoreReadDataEventArgs e)
        {
                X.Msg.Alert("InneCountriesStore_ReadData", "loaded").Show();
    
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>eTMF</title>
        <ext:XScript runat="server">
            <script>
                
                //var template = '<span style="color:{0};">{1}</span>';
            </script>   
        </ext:XScript> 
        <style>                                     
            .x-grid-row-expander-spacer {
                display: none
            }
    
            .white-footer .x-toolbar-footer{
              background-color: white !important;
            }
        </style>
    </head>
    <body>
        <form id="form" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
                <div>
                    <ext:Viewport 
                        runat="server"
                        StyleSpec="background-color: transparent;"
                        Layout="BorderLayout"
                        >
                        <Items>                                              
                            <ext:Panel
                                runat="server"
                                Title="Filters"
                                Layout="VBoxLayout"
                                Region="West"
                                Flex="1">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:GridPanel 
                                        runat="server"
                                        HideHeaders="true"                                                             
                                        >
                                        <Store>
                                            <ext:Store
                                                ID="CountriesStore"
                                                runat="server"
                                                IgnoreExtraFields="false"
                                                PageSize="10"
                                                >
                                                <Model>
                                                    <ext:Model runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="filters" />
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                            </ext:Store>
                                        </Store>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column 
                                                    runat="server"
                                                    DataIndex="filters"
                                                    Flex="1" />
                                            </Columns>
                                        </ColumnModel>
                                        <Plugins>
                                            <ext:RowExpander runat="server" SingleExpand="false">
                                                <Component>
                                                    <ext:GridPanel 
                                                        runat="server"
                                                        Cls="white-footer"
                                                        HideHeaders="true"
                                                        >
                                                        <Store>
                                                            <ext:Store ID="InnerCountriesStore" runat="server" OnRefreshData="InnerCountriesStore_ReadData" >
                                                                <Model>
                                                                    <ext:Model runat="server">
                                                                        <Fields>
                                                                            <ext:ModelField Name="countries" />
                                                                        </Fields>
                                                                    </ext:Model>
                                                                </Model>
                                                            </ext:Store>
                                                        </Store>
                                                        <ColumnModel runat="server">
                                                            <Columns>
                                                                <ext:Column runat="server" DataIndex="countries" />
                                                            </Columns>
                                                        </ColumnModel>
                                                    </ext:GridPanel>
                                                </Component>
                                            </ext:RowExpander>
                                        </Plugins>
                                    </ext:GridPanel>
                                    <ext:GridPanel 
                                        runat="server"
                                        HideHeaders="true"                                                                                                       
                                        >
                                        <Store>
                                            <ext:Store
                                                ID="CategoriesStore"
                                                runat="server"
                                                IgnoreExtraFields="false"
                                                PageSize="10">
                                                <Model>
                                                    <ext:Model runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="filter" />
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                            </ext:Store>
                                        </Store>
                                        <ColumnModel runat="server">
                                            <Columns>
                                                <ext:Column 
                                                    runat="server"
                                                    DataIndex="filter"
                                                    Flex="1" />
                                            </Columns>
                                        </ColumnModel>
                                        <Plugins>
                                            <ext:RowExpander runat="server" SingleExpand="false">
                                                <Component>
                                                    <ext:GridPanel
                                                        runat="server"
                                                        Cls="white-footer"
                                                        HideHeaders="true"
                                                        >
                                                        <Store>
                                                            <ext:Store ID="InnerCategoriesStore" runat="server">
                                                                <Model>
                                                                    <ext:Model runat="server">
                                                                        <Fields>
                                                                            <ext:ModelField Name="categories" />
                                                                        </Fields>
                                                                    </ext:Model>
                                                                </Model>
                                                            </ext:Store>
                                                        </Store>
                                                        <ColumnModel runat="server">
                                                            <Columns>
                                                                <ext:Column runat="server" DataIndex="categories" />
                                                            </Columns>
                                                        </ColumnModel>
                                                    </ext:GridPanel>
                                                </Component>
                                            </ext:RowExpander>
                                        </Plugins>
                                    </ext:GridPanel>
                                </Items>
                            </ext:Panel>                                              
                        </Items>                        
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Feb 25, 2017 at 4:07 AM. Reason: no user feedback for 7+ days
  2. #2
    Hello @atroul!

    In my side the grid does not show up no matter how many times I try to expand it! You must give the inner grid a fixed height for it to properly display under Row Expander.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again @atroul!

    It's been some time since we left a feedback here for your inquiry but still no response from your side. Do you still need help on this issue?
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Expanding many rows at the same time
    By redi in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 03, 2014, 10:05 AM
  2. Replies: 2
    Last Post: Jan 07, 2013, 8:08 AM
  3. [CLOSED] Preventing grid rows from expanding
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 26, 2012, 1:36 PM
  4. [CLOSED] Row Expander - Expanding a row using Java Script Dynamically?
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 31, 2011, 10:34 AM
  5. Replies: 0
    Last Post: Oct 07, 2008, 9:56 AM

Posting Permissions