[CLOSED] Gridpanel is blank after store reload

  1. #1

    [CLOSED] Gridpanel is blank after store reload

    I'm trying what I think should be a trivial example of having an editable gridpanel tied to a sqldatasource via a store.

    Page code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function insertRecord(grid) {
                var store = grid.store,
                    row = store.indexOf(store.insert(0, { Record_Name: "" })[0]);
    
                Ext.defer(function () {
                    grid.editingPlugin.startEditByPosition({ row: row, column: 0 });
                }, 100);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" /> 
            <asp:SqlDataSource ID="RecordsIWantSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" 
                DeleteCommand="DELETE FROM [Records_I_Want] WHERE [Id] = @Id" 
                InsertCommand="INSERT INTO [Records_I_Want] ([Record_Name], [Year_Released], [In_Collection]) VALUES (@Record_Name, @Year_Released, @In_Collection)" 
                SelectCommand="SELECT * FROM [Records_I_Want]" 
                UpdateCommand="UPDATE [Records_I_Want] SET [Record_Name] = @Record_Name, [Year_Released] = @Year_Released, [In_Collection] = @In_Collection WHERE [Id] = @Id">
                <DeleteParameters>
                    <asp:Parameter Name="Id" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="Record_Name" Type="String" />
                    <asp:Parameter Name="Year_Released" Type="Int32" />
                    <asp:Parameter Name="In_Collection" Type="Boolean" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="Record_Name" Type="String" />
                    <asp:Parameter Name="Year_Released" Type="Int32" />
                    <asp:Parameter Name="In_Collection" Type="Boolean" />
                    <asp:Parameter Name="Id" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>
            <ext:Store ID="RecordsIWantStore" runat="server" DataSourceID="RecordsIWantSqlDataSource" 
                OnAfterRecordInserted="RecordsIWantStore_AfterRecordInserted">
                <Model>
                    <ext:Model runat="server" IDProperty="Id">
                        <Fields>
                            <ext:ModelField Name="Id" Mapping="Id" Type="Int" SubmitEmptyValue="Null" />
                            <ext:ModelField Name="Record_Name" Mapping="Record_Name" Type="String" />
                            <ext:ModelField Name="Year_Released" Mapping="Year_Released" Type="Int" />
                            <ext:ModelField Name="In_Collection" Mapping="In_Collection" Type="Boolean" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <div>
                <br />
                <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                    <Items>
                        <ext:GridPanel ID="RecordsIWantGridPanel" runat="server" Height="300" Title="Records I Want" StoreID="RecordsIWantStore">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button ID="tbbAdd" Icon="Add" Text="Insert" runat="server">
                                            <Listeners>
                                                <Click Handler="insertRecord(#{RecordsIWantGridPanel});" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:Button runat="server" ID="tbbDelete" Icon="Delete" Text="Delete Selected Records">
                                            <Listeners>
                                                <Click Handler="#{RecordsIWantGridPanel}.deleteSelected();" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:ToolbarSeparator></ext:ToolbarSeparator>
                                        <ext:Button runat="server" ID="tbbSave" Icon="Disk" Text="Save">
                                            <Listeners>
                                                <Click Handler="#{RecordsIWantStore}.sync();" />
                                            </Listeners>
                                        </ext:Button>
                                        <ext:ToolbarSeparator></ext:ToolbarSeparator>
                                        <ext:Button runat="server" ID="tbbRefresh" Icon="ArrowRefresh" Text="Refresh">
                                            <Listeners>
                                                <Click Handler="#{RecordsIWantStore}.reload();" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column runat="server" Flex="1" ID="Record_NameColumn" Header="Record Name" Sortable="true" DataIndex="Record_Name">
                                    <Editor>
                                        <ext:TextField runat="server" AllowBlank="false" MaxLength="200" />
                                    </Editor>
                                </ext:Column>
                                    <ext:Column runat="server" Flex="1" ID="Year_ReleasedColumn" Header="Year Released" Sortable="true" DataIndex="Year_Released">
                                    <Editor>
                                        <ext:NumberField runat="server" AllowBlank="true" MaxLength="4" />
                                    </Editor>
                                </ext:Column>
                                    <ext:CheckColumn runat="server" Flex="1" ID="In_Collection" Header="In Collection?" Sortable="true" DataIndex="In_Collection" Editable="true">
                                </ext:CheckColumn>
                                </Columns>
                            </ColumnModel>
                            <Plugins>
                                <ext:CellEditing runat="server" />
                            </Plugins>
                        </ext:GridPanel>
                    </Items>
                </ext:Viewport>
            </div>
        </form>
    </body>
    </html>
    Code-behind:
    protected void RecordsIWantStore_AfterRecordInserted(object sender, Ext.Net.AfterRecordInsertedEventArgs e)
            {
                e.Keys.Add("Id", 0);
            }
    The gridpanel updates after the record is inserted, and deletes and edits work fine (gridpanel does what it's supposed to do), but if I click the refresh button that fires the reload method of the store, the gridpanel goes blank. Any pointers or insights would be appreciated.
    Last edited by fabricio.murta; May 17, 2019 at 8:34 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @astovall!

    It seems you didn't give the store its 'OnReadData' parameter.

    Take a look at this example, where refresh works:
    - Grid Panel > Update > SQLDataSource

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Glad, but...

    I'm glad to report that this fixed the problem, but it's frustrating to not know how to know what's required and what's not.
  4. #4
    Hello @astovall!

    Thanks for your feedback. I can point you some directions on being able to identify yourself what's missing in general when you encounter a problem developing with Ext.NET.

    - Checking for a similar example (or examples involving what you want to do). This was the case for your current question. It is usually a good idea to take some time and browse the examples, one by one; this helps you remember "I saw this situation somewhere", so it increases the odds on finding an example that does exactly what you want when you need it.

    - Ext.NET's C# IntelliSense. Although this won't tell you whether it is necessary to add specific code, it helps hinting you what are the possible configurations you can explore in the component you're adding to the page.

    - Ext.NET online API docs. Every version we release, we update online API documentation available at https://docs.ext.net/.

    - Ext.NET online client-side API docs. That's the Ext JS documentation maintained by Sencha. The Ext JS version corresponding to the current Ext.NET 4.7.1 is 6.6.0, documentation available at: https://docs.sencha.com/extjs/6.6.0/classic/Ext.html

    - Client-side browser developer tools (F12 on most browsers) helps you debug the code and identify where the code breaks when it does; then the client-side documentation may help understand the related code, allowing to either use it correctly, or circumvent a bug (if that's the case).

    - Search forums. A lot of issues have already been handled here in the forums through time. A google search like site:forums.ext.net my_search_terms might show fruitfrul in terms of search results for threads covering the same issue or question.

    These would be some places to look at when trying to develop with Ext.NET.

    Well, hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    With the exception of docs.ext.net (which I didn't know existed), I've done all of those things. I'm working with translation and updates on coolite code, and it's often not clear what direction to look when migrating from that old code to ext.net 4.x.

    It would be helpful if (for example), I could search for "onreaddata" in the ext.net examples site and get results, as sometimes there's a recommendation made or search result found in the forums that I can't determine how to connect to a particular topic in the examples.

    I'll definitely be looking through docs.ext.net today to see what's there!
  6. #6
    Cloning the Examples Explorer locally, then doing a search through the source code (Visual Studio or Visual Studio Code) may help uncover instances where specific code scenarios are used, such as onreaddata.

    Hope this helps.
    Geoffrey McGill
    Founder & CEO
  7. #7
    Hello @astovall!

    It's been a while since we last replied you here, and still no feedback from you. Were the information provided here enough for you to address the issue you were facing with your grid?

    We may mark this thread as closed if you don't reply us in 7+ days from now; but we won't lock up the thread, so you'd be able to post a follow up here whenever you deem convenient.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Feb 12, 2014, 3:58 PM
  2. Replies: 1
    Last Post: Nov 07, 2013, 8:27 PM
  3. [CLOSED] [1.2] GridPanel and Store reload scroll position?
    By Timothy in forum 1.x Premium Help
    Replies: 2
    Last Post: Oct 17, 2011, 5:45 PM
  4. Replies: 3
    Last Post: Oct 08, 2009, 11:57 AM
  5. Databind / Reload Store and GridPanel Problem
    By locoperoguapo in forum 1.x Help
    Replies: 5
    Last Post: Feb 10, 2009, 9:23 AM

Tags for this Thread

Posting Permissions