[CLOSED] Grid items are not displayed even though they are detected (databind) -

  1. #1

    [CLOSED] Grid items are not displayed even though they are detected (databind) -

    hi guys.

    I have a little problem, I have 2 Gridpanel, the first grid are load with a pool of data and when I select one of this elements, this show a window with the second panel, loading with the same elements (same name) but with diferents columns. the problem is when I select a element, the system displayed me de second grid , but without elements, or more specific, the elements are detected (look the screenshots) but i can't see the data.

    the system should, when I select one element in grid 1, this have to generate the data (with array or SQL, in this example I use a Array) and bind in the store of grid 2, displayed me the data.

    the sequence:

    Click image for larger version. 

Name:	ExampleSelectionGrid1_desc.jpg 
Views:	42 
Size:	50.6 KB 
ID:	24574

    Click image for larger version. 

Name:	ExampleSelectionGrid2_desc.jpg 
Views:	63 
Size:	74.4 KB 
ID:	24575

    I cannot understand why this does not work ?
    Any thoughts?


    thanks a lot .

    the code:

    <%@ 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)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
                };
                
                this.Store1.DataBind();
                
            }
        }
        protected void RowSelectionModel_Select(object sender, DirectEventArgs e)
        {
    
            this.Store3.DataSource = new object[]
                {
                    new object[] { "3m Co","yes"},
                    new object[] { "Alcoa Inc", "no"},
                    new object[] { "Altria Group Inc", "no"},
                    new object[] { "American Express Company", "yes" },
                    new object[] { "American International Group, Inc.", "no" },
                    new object[] { "AT&T Inc.", "no"},
                    new object[] { "Boeing Co.", "yes"},
                    new object[] { "Caterpillar Inc.", "yes" },
                    new object[] { "Citigroup, Inc.", "yes" },
                    new object[] { "E.I. du Pont de Nemours and Company", "no" }
                };
    
            this.Store3.DataBind();
            
            Window1.Show();
        }
        
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Connection 2 grid</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Begin... choose one except the first page..."
                Width="600"
                Height="200"
                Region="Center">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="2">
                        
                        <Model>
                            <ext:Model ID="Model1" 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 ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server"
                            Text="Company"
                            Width="160"
                            DataIndex="company"
                            Flex="1" />
                        <ext:Column ID="Column2" runat="server"
                            Text="Price"
                            Width="75"
                            DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server"
                            Text="Change"
                            Width="75"
                            DataIndex="change" />
                        <ext:Column ID="Column4" runat="server"
                            Text="Change"
                            Width="75"
                            DataIndex="pctChange" />
                        <ext:DateColumn ID="DateColumn1" runat="server" 
                            Text="Last Updated" 
                            Width="85" 
                            DataIndex="lastChange" />
    
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CellSelectionModel ID="CellSelectionModel_cell" runat="server">
                        <DirectEvents>
                            <Select OnEvent="RowSelectionModel_Select" StopEvent="true">
                                <EventMask ShowMask="True" Msg="Redireccionando ..." MinDelay="100" />
                            </Select>
                        </DirectEvents>
                    </ext:CellSelectionModel>
                </SelectionModel>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1"
                        runat="server"
                        DisplayInfo="true"
                        DisplayMsg="Displaying Companies {0} - {1} of {2}"
                        EmptyMsg="No companies to display"
                        />
                </BottomBar>
            </ext:GridPanel>
    
            <ext:Store ID="Store2" runat="server" PageSize="2">
             <Model>
                <ext:Model ID="Model2" runat="server">
                    <Fields>
                        <ext:ModelField Name="company2" />
                    </Fields>
                </ext:Model>
              </Model>
            </ext:Store>
    
    
            <ext:Window ID="Window1" runat="server"
                Title="This is the problem.."
                Icon="Table"
                Modal="true"
                Width="400"
                Height="300"
                Hidden="true"
                Collapsible="true"
                Layout="Fit" Closable="false">
                <Items>
                    <ext:GridPanel
                        ID="GridPanel2"
                        runat="server"
                        Title="how focus the selected row in grid 1 but in this grid..."
                        Width="800"
                        Height="300"
                        SelectionMemory="true">
                        <Store>
                            <ext:Store ID="Store3" runat="server" PageSize="2">
                                <Model>
                                    <ext:Model ID="Model3" runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="price" />
                                    <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                        <ColumnModel ID="ColumnModel2" runat="server">
                    <Columns>
                        <ext:Column ID="Column5" runat="server"
                            Text="Company"
                            Width="160"
                            DataIndex="company"
                            Flex="1" />
                        
                        <ext:Column ID="Column6" runat="server"
                            Text="Yes/No"
                            Width="75"
                            DataIndex="price" />
                        <ext:DateColumn ID="DateColumn2" runat="server" 
                            Text="Last Updated" 
                            Width="85" 
                            DataIndex="lastChange" />    
                        
                    </Columns>
                </ColumnModel>
                        <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar2"
                        runat="server"
                        DisplayInfo="true"
                        DisplayMsg="Displaying Companies {0} - {1} of {2}"
                        EmptyMsg="No companies to display"
                        />
                </BottomBar> 
                    </ext:GridPanel>
                </Items>
                <Tools>
                        <ext:Tool ToolTip="Cerrar" CustomType="my-close" Handler="owner.ownerCt.close();" Width="19" Height="19" />
                </Tools>
                
            </ext:Window>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Apr 26, 2016 at 6:53 PM. Reason: [CLOSED]
  2. #2
    Hello @OpenDat2000!

    The grid won't work if you don't match the model to the data it is going to read. Your responded array object to the Store3 had just two columns (two entries per record), and you tried to draw three columns on the grid. That third column data (which is a date) must come from somewhere.

    As for why you were getting the records but no data to the records, when reading an array after the page has been loaded (not from the first load), you have to bind a reader to do the mappings of fields<->model. Well, this is a little confusing, but this mapping is just a task that is done automatically from the first load (like your other grid). It just does not work if you do anonymous data binding from any ajax/postback in that case.

    At least for me, I could have your sample working after reviewing your GridPanel2's model fields and adding the reader setting. Check how your example looks like, I hope that's what you needed:

    <%@ 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)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
                };
                
                this.Store1.DataBind();
                
            }
        }
        protected void RowSelectionModel_Select(object sender, DirectEventArgs e)
        {
    
            this.Store3.DataSource = new object[]
            {
                new object[] { "3m Co","yes"},
                new object[] { "Alcoa Inc", "no"},
                new object[] { "Altria Group Inc", "no"},
                new object[] { "American Express Company", "yes" },
                new object[] { "American International Group, Inc.", "no" },
                new object[] { "AT&T Inc.", "no"},
                new object[] { "Boeing Co.", "yes"},
                new object[] { "Caterpillar Inc.", "yes" },
                new object[] { "Citigroup, Inc.", "yes" },
                new object[] { "E.I. du Pont de Nemours and Company", "no" }
            };
    
            this.Store3.DataBind();
    
            Window1.Show();
        }
        
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Connection 2 grid</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Begin... choose one except the first page..."
                Width="600"
                Height="200"
                Region="Center">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="2">
                        
                        <Model>
                            <ext:Model ID="Model1" 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 ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server"
                            Text="Company"
                            Width="160"
                            DataIndex="company"
                            Flex="1" />
                        <ext:Column ID="Column2" runat="server"
                            Text="Price"
                            Width="75"
                            DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server"
                            Text="Change"
                            Width="75"
                            DataIndex="change" />
                        <ext:Column ID="Column4" runat="server"
                            Text="Change"
                            Width="75"
                            DataIndex="pctChange" />
                        <ext:DateColumn ID="DateColumn1" runat="server" 
                            Text="Last Updated" 
                            Width="85" 
                            DataIndex="lastChange" />
    
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CellSelectionModel ID="CellSelectionModel_cell" runat="server">
                        <DirectEvents>
                            <Select OnEvent="RowSelectionModel_Select" StopEvent="true">
                                <EventMask ShowMask="True" Msg="Redireccionando ..." MinDelay="100" />
                            </Select>
                        </DirectEvents>
                    </ext:CellSelectionModel>
                </SelectionModel>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1"
                        runat="server"
                        DisplayInfo="true"
                        DisplayMsg="Displaying Companies {0} - {1} of {2}"
                        EmptyMsg="No companies to display"
                        />
                </BottomBar>
            </ext:GridPanel>
    
            <ext:Window ID="Window1" runat="server"
                Title="This is the problem.."
                Icon="Table"
                Modal="true"
                Width="400"
                Height="300"
                Hidden="true"
                Collapsible="true"
                Layout="Fit" Closable="false">
                <Items>
                    <ext:GridPanel
                        ID="GridPanel2"
                        runat="server"
                        Title="inner panel"
                        Width="800"
                        Height="300"
                        SelectionMemory="true">
                        <Store>
                            <ext:Store ID="Store3" runat="server" PageSize="2">
                                <Model>
                                    <ext:Model ID="Model3" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="yesno" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Reader>
                                    <ext:ArrayReader />
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel2" runat="server">
                            <Columns>
                                <ext:Column ID="Column5" runat="server"
                                    Text="Company"
                                    Width="160"
                                    DataIndex="company"
                                    Flex="1" />
    
                                <ext:Column ID="Column6" runat="server"
                                    Text="Yes/No"
                                    Width="75"
                                    DataIndex="yesno" />
                                <%-- commented, we don't have this column's data in our actual data!
                                <ext:DateColumn ID="DateColumn2" runat="server" 
                                    Text="Last Updated" 
                                    Width="85" 
                                    DataIndex="yesno" />--%>
                            </Columns>
                        </ColumnModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar2"
                                runat="server"
                                DisplayInfo="true"
                                DisplayMsg="Displaying Companies {0} - {1} of {2}"
                                EmptyMsg="No companies to display" />
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
                <Tools>
                    <ext:Tool ToolTip="Cerrar" CustomType="my-close" Handler="owner.ownerCt.close();" Width="19" Height="19" />
                </Tools>
            </ext:Window>
        </form>
    </body>
    </html>
    Well, maybe as a side note, I noticed some indentation quirks on the example code you provided, and it really made it harder to read the store definition before I could see the mismatches, so I've just let Visual Studio indent (format) the code and it was all clearer. Maybe keeping indentation tidy should help you on your development somehow (although you probably just missed indentation on the sample you provided us).

    There was also an unused store, and a message about 'how to focus' that keeps trying to mislead me from the main thread's point. :)
    Well, hope that helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for the reply FabrÃ*cio,

    Sorry for the disorder in the code. Finally I resolved this issue using DataTable to store the data in Store3, now I can see the data in grid 2, So I considerate to close this post.

    thanks again. :)

    pd: the reply was send with my personal account.
    Last edited by ComoSiempre; Apr 26, 2016 at 1:23 PM.
  4. #4
    Hello @ComoSiempre! Thanks for the feedback, glad you could have it running!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. The items are not displayed on the aspx.
    By Ciberomar in forum 3.x Help
    Replies: 2
    Last Post: Oct 15, 2015, 2:01 PM
  2. [CLOSED] TimeField Max Items Displayed
    By Patrick_G in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 27, 2012, 6:52 AM
  3. Replies: 7
    Last Post: Jul 25, 2012, 5:34 PM
  4. Replies: 1
    Last Post: Dec 12, 2011, 5:14 PM
  5. Replies: 8
    Last Post: Oct 21, 2011, 6:03 PM

Tags for this Thread

Posting Permissions