What's New?

[CLOSED] OnReadData not firing in Grid

  1. #1
    Jan 19, 2017, 3:17 PM

    [CLOSED] OnReadData not firing in Grid 

    <%@ Page Language="C#"%>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void FilesStore_Load(object sender, EventArgs e)
        {

            X.Msg.Alert("filesttores load", "loaded").Show();
            DAL.CDMAdminDataContext dc = new DAL.CDMAdminDataContext();

            var result =
               (from i in dc.Files

                orderby i.id descending
                select new { title = i.Title});

            this.FilesStore.DataSource = result;
            this.FilesStore.DataBind();
        }
</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>eTMF</title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <div>
                <ext:Viewport 
                    runat="server"
                    StyleSpec="background-color: transparent;"
                    Layout="BorderLayout"
                    >
                    <Items> 
                        <ext:GridPanel
                            ID="FilesGrid"
                            runat="server"
                            Title="Files"
                            Flex="6"
                            Region="Center"
                            
                            >
                            <Tools>
                                <ext:Tool Type="Refresh" Handler="#{FilesStore}.reload();" ToolTip="Refresh files" /> 
                            </Tools>
                            <Store>
                                <ext:Store ID="FilesStore" runat="server" OnReadData="FilesStore_Load"   >
<%--                                    <Listeners>
                                        <DataChanged Handler="#{FilesStore}.reload();" />
                                        
                                    </Listeners>--%>
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="title" Type="String" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column ID="Column1"
                                        runat="server"
                                        Text="Title"
                                        DataIndex="title"
                                        Flex="1">
                                        <Items>
                                            <ext:ComboBox
                                                ID="cmbTitle"
                                                runat="server"
                                                TrigerAction="All"
                                                QueryMode="Local"
                                                DisplayField="title"
                                                ValueField="title">
                                                <Store>
                                                    <ext:Store ID="cmbTitleStore" runat="server"  OnLoad="cmbTitleStore_Load">
                                                        <Model>
                                                            <ext:Model runat="server">
                                                                <Fields>
                                                                    <ext:ModelField Name="title" />
                                                                </Fields>
                                                            </ext:Model>
                                                        </Model>
                                                    </ext:Store>
                                                </Store>
                                                <Listeners>
                                                    <Change Handler="applyFilter(this);" Buffer="250" />
                                                </Listeners>
                                                <Plugins>
                                                    <ext:ClearButton runat="server" />
                                                </Plugins>
                                            </ext:ComboBox>
                                        </Items>
                                    </ext:Column>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                   </Items>                        
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
    Last edited by fabricio.murta; Feb 25, 2017 at 4:08 AM. Reason: no user feedback for 7+ days
  2. #2
    Jan 19, 2017, 10:39 PM
    Hello @atroul!

    I can't run your code here, please review it and let us know, I'm sure we are getting there! :)

    I see you left internal references (that DAL class). Besides, it is not necessary to reproduce the issue, right? Just the X.Msg.Alert().Show() would do -- if the matter is just to get the event firing. Well, I removed that DAL part but more errors popped up on my screen so I had to give it up for the time being.

    You left at least some other broken code, like the combo box store's call for cmbTitleStore_Load. From that point on I couldn't check any more, I kindly ask you to review the test case so we can run it on our side and effectively help you with the issue on the event not firing.

    Hope to hear back from you soon!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jan 20, 2017, 8:54 AM
    Hello Fabricio,
    here is a more simplified standalone example with the same problem: OnReadData is not firing

    <%@ 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" OnReadData="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>
  4. #4
    Jan 20, 2017, 10:29 PM
    Okay, we're getting there! Thank you very much for your efforts! I'll get back to you in a while!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Jan 21, 2017, 10:51 AM
    Hello @atroul!

    Thanks, I could run your sample code here.

    We have several problems on it. First, you added the code to fill the data to the grids on page load outside the IsAjaxRequest test. This means you'll be trying to bind data to the static grid panels on every single postback or ajax request you make to the page. Direct events (or direct method calls for that matter) are ajax requests, so first thing, when you ever have the OnReadData event to trigger, the response will be polluted with code to fill again the other grids.

    Solution for that is just move it inside the ajax request block you already have in your Page_Load method.

    Second problem here is you are using row expander with inner component, with SingleExpand="false", and wants to give the grid store an ID. SingleExpand being false means you can expand more than one of the grid rows at once so IDs are not preserved on components. That's because should IDs be specified statically, they will conflict exactly like a HTML submit form with different fields with same ID would do.

    And this leads us to yet another problem. If we need to be able to expand various grids at the same time, using in code behind something like InnerCountriesStore.DataBind() will not be possible. We'll have to actually pass the grid's store when we want to refresh.

    At last, the first reason the grid does not fire the OnReadData is because this is only fired when you reload the grid's store.

    You can understand this if you investigate this example: Grid Panel - Array Grid with Local Paging and Remote Data. You can paste the source of this example on a new file in your web project and place a breakpoint on line 14. Run with debugging enabled and notice it will only trigger once you click 'reload' (arrows in circle next to the "Page Size" label, bottom of the page).

    But ultimately the second reason you wouldn't be able to run the code behind method even if do call the grid store's reload() method, is exactly the second problem you had in your code: using SingleExpand="false". The dynamics needed to enable expanding various rows at once disallows specifying component's IDs inside the expanded row, and this either requires you to manually pass to code behind information about the component you want to change, or just use static items.

    But if you can afford in your use case to use SingleExpand="true" then all your problems are over. You can just bind the store's reload() method to the action of expanding a row (which will also allow you to specify data to which row you want to load on the panel before it is displayed!).

    So long story short.. in summary:
    - Page_Load() code you want to run just on the first page load (and not on every ajax call) should be inside the test block you left empty
    - SingleExpand="false" implies on having ID-less components inside the Row Expander
    - Code behind will need very specific code in order to interact with id-less components (will be strictly bound to the component scope when the response is analyzed, and must have specific code both client-side and server-side on each case) -- you will be able to do something similar in the sample I provided you for the MultiUpload case in this post where I showcased how to handle the file upload success event.
    - OnReadData is only called once the store is reloaded, not on its first load.
    - Back to second entry, OnReadData will not work anyway because the way SingleExpand="false" mangles the inner components of the row expander.

    I hope this helps clarify at least most of your questions about the usage there!..

    Should you afford to use SingleExpand="true" your test case will work if you use it like this:

    <%@ 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)
        {
            var x = new Store();

            //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)
    {
        InnerCountriesStore.DataSource = new object[]
        {
            new { countries = "country one" },
            new { countries = "country two" },
            new { countries = "country three" }
        };

        InnerCountriesStore.DataBind();
    }
</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>';
            var handleRowExpand = function (item, record, body) {
                var grid = item.getComponent(record, body);
                grid.store.reload();
                window.supergrid = grid;
            }
        </script>
    </ext:XScript>
    <style>
        /* This breaks Ext.NET 4.2.0, so remove when you upgrade! */
        .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"
                                Height="400"
                                >
                                <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="true">
                                        <Listeners>
                                            <Expand Fn="handleRowExpand" />
                                        </Listeners>
                                        <Component>
                                            <ext:GridPanel
                                                ID="gp1" runat="server"
                                                HideHeaders="false"
                                                Height="200">
                                                <Store>
                                                    <ext:Store ID="InnerCountriesStore" runat="server" OnReadData="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" Text="ctyes" DataIndex="countries" />
                                                    </Columns>
                                                </ColumnModel>
                                            </ext:GridPanel>
                                        </Component>
                                    </ext:RowExpander>
                                </Plugins>
                            </ext:GridPanel>
                            <ext:GridPanel
                                runat="server"
                                HideHeaders="true"
                                Height="400">
                                <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>
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Feb 10, 2017, 8:02 PM
    Hello @atroul!

    It's been some time since we replied here and still no feedback from you. Do you still need help with this issue?
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] Razor Store OnReadData
    By rguardado in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 02, 2015, 7:45 AM
  2. TreePanel OnReadData EventMask
    By SaleCar in forum 3.x Help
    Replies: 3
    Last Post: Mar 10, 2015, 2:33 PM
  3. [CLOSED] Store timeout onReadData
    By rbtceo in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 22, 2014, 3:59 AM
  4. [CLOSED] "Itemclick" event is also firing while deselecting Check box column. How to prevent it from firing?
    By alscg in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 05, 2013, 10:09 AM
  5. GridPanel - OnReadData - StoreReadDataEventArgs
    By tanky65 in forum 2.x Help
    Replies: 1
    Last Post: Oct 26, 2012, 4:49 AM

Posting Permissions