[CLOSED] Not able to reference childgrid inside main grid

  1. #1

    [CLOSED] Not able to reference childgrid inside main grid

    Hi Guys

    We have migrated to ext 4.1 we are facing some issues, one of them is we are not able to reference childgrid in code or handlers
    please check code below
    <Listeners>
                                            <BeforeExpand Handler="#{gridChild1}.store.removeAll();"></BeforeExpand>
                                    </Listeners>
    full code is below

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
    
                <ext:ResourceManager ID="ResourceManager1" runat="server" CleanResourceUrl="true" DirectMethodNamespace="DM" Namespace="app">
                </ext:ResourceManager>
    
                <ext:Viewport runat="server">
                    <Items>
    
                        <ext:GridPanel
                            ID="GridPanel1"
                            runat="server"
                            Title="Array Grid"
                            Width="700" AutoHeight="true">
                            <Store>
                                <ext:Store ID="Store1" runat="server" PageSize="10">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="company" />
                                                <ext:ModelField Name="price" Type="Float" />
                                                <ext:ModelField Name="change" Type="Float" />
                                                <ext:ModelField Name="pctChange" Type="Float" />
                                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                            </Fields>
    
                                        </ext:Model>
    
                                    </Model>
    
                                </ext:Store>
                            </Store>
    
    
                            <ColumnModel runat="server">
                                <Columns>
    
    
                                    <ext:Column ID="Company" Header="Company" DataIndex="company" runat="server" />
    
                                    <ext:Column Header="Price" DataIndex="price" runat="server">
                                        <Renderer Format="UsMoney" />
                                    </ext:Column>
                                    <ext:Column ColumnID="Change" Header="Change" DataIndex="change" runat="server">
                                        <Renderer Fn="change" />
                                    </ext:Column>
                                    <ext:Column Header="Change" DataIndex="pctChange" runat="server">
                                        <Renderer Fn="pctChange" />
                                    </ext:Column>
                                    <ext:DateColumn Header="Last Updated" DataIndex="lastChange" runat="server" />
                                </Columns>
                            </ColumnModel>
    
                            <SelectionModel>
                                <ext:CheckboxSelectionModel runat="server"></ext:CheckboxSelectionModel>
                            </SelectionModel>
    
                            <View>
                                <ext:GridView runat="server" StripeRows="true" />
                            </View>
    
                            <Plugins>
    
                                <ext:RowExpander ID="gridResultsExpander" Visible="true" runat="server" ExpandOnDblClick="false">
    
                                    <Component>
    
                                        <ext:GridPanel
                                            ID="gridChild1"
                                            runat="server"
                                            Width="500" AutoHeight="true" EnableColumnHide="false">
                                            <Store>
                                                <ext:Store ID="Store2" runat="server" PageSize="10">
                                                    <Model>
                                                        <ext:Model runat="server">
                                                            <Fields>
                                                                <ext:ModelField Name="company" />
                                                                <ext:ModelField Name="price" Type="Float" />
                                                                <ext:ModelField Name="change" Type="Float" />
    
                                                            </Fields>
                                                        </ext:Model>
    
                                                    </Model>
    
                                                </ext:Store>
                                            </Store>
                                            <ColumnModel runat="server">
                                                <Columns>
                                                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" runat="server" />
                                                    <ext:Column Header="Price" DataIndex="price" runat="server">
                                                        <Renderer Format="UsMoney" />
                                                    </ext:Column>
                                                </Columns>
                                            </ColumnModel>
    
                                           
    
    
                                        </ext:GridPanel>
    
                                    </Component>
                                    <Listeners>
                                            <BeforeExpand Handler="#{gridChild1}.store.removeAll();"></BeforeExpand>
                                    </Listeners>
    
                                </ext:RowExpander>
    
                            </Plugins>
                        </ext:GridPanel>
    
                    </Items>
    
                </ext:Viewport>
    
    
            </div>
        </form>
    </body>
    </html>
    
    code behind

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    public partial class _Default : System.Web.UI.Page{
    
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
    
    
    
                this.Store2.DataSource = this.Data2;
                this.Store2.DataBind();
            }
        }
    
        protected void MyData_Refresh(object sender, StoreDirectEvents  e)
        {
            this.BindData();
        }
    
        protected void MyChildData_Refresh(object sender, StoreDirectEvents e)
        {
            this.BindChildData();
        }
    
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;     
            store.DataBind();
        }
    
        private void BindChildData()
        {
            Store store = this.gridChild1.GetStore();
    
            store.DataSource = this.Data2;
            store.DataBind();
        }
    
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now }
                };
            }
        }
    
    
        private object[] Data2
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "Wipro", 71.72,now },
                    new object[] { "Infosys", 29.01,  1.47, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45,  now }
                };
            }
        }
    
    
    
    }
    Thanks
  2. #2
    Hello @amitpareek!

    The grid and store are instantiated the moment the first expand is made, so you should check if the grid is currently defined before trying to clean the store. Something like this:

    if (#{gridChild1} && #{gridChild1}.store) {
     #{gridChild1}.store.removeAll();
    }
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @fabricio

    <BeforeExpand Handler="if (#{gridChild1} && #{gridChild1}.store) { #{gridChild1}.store.removeAll();}
    else {console.log('gridChild undefined ');}"></BeforeExpand>
    this does not work , it still remains undefined
  4. #4
    Hello @amitpareek!

    That's because it indeed is undefined until you expand a grid row the first time. Only from second expand onwards the grid and store can actually be emptied. The 'else' you added to your code will trigger just once.
  5. #5
    Hello @fabricio

    We have tried that , multiple times but on all expands , the gridChild is undefined

    this worked in ext 2.5.x
  6. #6
    Hello @amitpareek!

    Please use latest GitHub version of Ext.NET. This issue has been fixed after 4.1.0 public release.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Nested childgrid autoselection issue
    By amitpareek in forum 2.x Legacy Premium Help
    Replies: 18
    Last Post: Jan 25, 2017, 1:50 PM
  2. Prevent select all On Childgrid
    By asifsolkar in forum 2.x Help
    Replies: 0
    Last Post: May 20, 2016, 10:46 AM
  3. Replies: 10
    Last Post: Apr 20, 2012, 12:34 PM
  4. Replies: 3
    Last Post: Jan 23, 2012, 7:51 AM
  5. [CLOSED] How to show a reference to a link inside of the radio control?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 07, 2010, 6:20 PM

Tags for this Thread

Posting Permissions