[CLOSED] Infinite Scrolling Grid with GridFilter feature - JavaScript Error

[MacGarnicle]

Hello,

I have an infinite scrolling grid, similar to this example:

https://examples2.ext.net/#/GridPane...ling/Overview/

The JavaScript error I mention below happens ONLY when I try to use the scroll bars of the grid. The grid initially loads perfectly.

Here is the code (more or less):

<script runat="server">
        protected void Store_ReadData(object sender, StoreRefreshDataEventArgs e)
        {
            Store store = (Store)sender;
            store.Data = BusinessLogic.GetContacts(e.Start, e.Limit);
            e.Total = 14000;
        }
</script>


<ext:Panel ID="pnlSearch" Region="West" Collapsible="true" Width="350" MinWidth="350" Split="true" Title="My Lists" Icon="Magnifier" runat="server" Layout="AnchorLayout">
    <Items>
            <ext:GridPanel 
                runat="server" 
                ID="grdSearch" 
                ClientIDMode="Static"
                DisableSelection="true"
                height="500"
                >
                <Store>
                    <ext:Store runat="server" ID="MyStore" Buffered="true" AutoLoad="false" RemoteSort="true" OnReadData="Store_ReadData" >
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:JsonReader Root="data" />
                                </Reader>                            
                            </ext:PageProxy>
                        </Proxy>
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="OrgID" Type="Int"  />
                                    <ext:ModelField Name="ContactID" Type="Int"  />
                                    <ext:ModelField Name="OrgName" Type="String" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Sorters>
                                <ext:DataSorter Property="OrgName" Direction="ASC" />
                        </Sorters>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server" >
                    <Columns>
                        <ext:Column runat="server" ID="OrgID" Text="OrgID" DataIndex="OrgID" Width="50" ClientIDMode="Static" Sortable="true"    />
                        <ext:Column runat="server" ID="ContactID" Text="ContactID" DataIndex="ContactID" Width="50" ClientIDMode="Static" Sortable="true" />
                        <ext:Column runat="server" ID="OrgName" Text="OrgName" DataIndex="OrgName" Flex="1" Sortable="true"   />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" TrackOver="false" />
                </View>
                <Features>
                    <ext:GridFilters ID="myFilters" runat="server" ClientIDMode="Static">
                        <Filters>
                            <ext:NumericFilter DataIndex="OrgID" />
                            <ext:NumericFilter DataIndex="ContactID" />
                            <ext:StringFilter DataIndex="OrgName" />
                        </Filters>
                    </ext:GridFilters>
                </Features>
                <Listeners>
                    <AfterRender Handler="var me = this; me.store.prefetch({start: 0, limit: 99, callback: function() { me.store.guaranteeRange(0, 49); }});" Delay="100" />
                </Listeners>
            </ext:GridPanel>
    </Items>
</ext:Panel>

When I comment out this block:

<ext:GridFilters ID="myFilters" runat="server" ClientIDMode="Static">
                        <Filters>
                            <ext:NumericFilter DataIndex="OrgID" />
                            <ext:NumericFilter DataIndex="ContactID" />
                            <ext:StringFilter DataIndex="OrgName" />
                        </Filters>
</ext:GridFilters>

Everything works perfectly.

When I leave that block of code in, however, I get the following JavaScript error in Chrome when I try to use the scroll bars of the grid:

Uncaught TypeError: Cannot read property 'params' of undefined
Ext.define.onBeforeLoadext.axd:76
fireext.axd:18
Ext.util.DirectObservable.continueFireEventext.axd :14
(anonymous function)ext.axd:18
Ext.util.DirectObservable.fireEventext.axd:13
(anonymous function)ext.axd:18
Ext.define.maskext.axd:18
Ext.define.doAttemptLoadext.axd:18

And in Firebug:

options is undefined
...(function(header){var filter=me.getFilter(header.dataIndex);header[filter&&filte...

When I remove the infinite scrolling functionality, the filters work perfectly.

Any ideas how I can get remote grid filters working with infinite scrolling?

Thank you.

[Daniil]

Hi,

Please update Ext.NET and Ext.NET.Examples and see the updated example.

[MacGarnicle]

Do you mean I should re-download Ext.NET again? Has there been an update?

Also, are the online examples the most up-to-date ones?

[Daniil]

Do you mean I should re-download Ext.NET again? Has there been an update?

Yes, from
http://svn.ext.net/premium/branches/2.0/Ext.Net/

Also, are the online examples the most up-to-date ones?

No, the online examples have been updated partially. We update an online example if it doesn't require the latest Ext.NET.dll. If an example requires the last Ext.NET.dll, it will be update with the next release.

The latest Ext.NET.Examples sources you can checkout from:
https://github.com/extnet/Ext.NET.Examples

[MacGarnicle]

*edit* Ignore this post!

Okay, I've checked out the the latest Ext.NET - built it and replaced the DLLs in my project. I also modified my code to look more like the example.

Here's the new panel:

<ext:GridPanel 
                runat="server" 
                ID="grdSearch" 
                ClientIDMode="Static"
                DisableSelection="true"
                height="500"
                >
                <Store>
                    <ext:Store runat="server" ID="MyStore" Buffered="true" PageSize="100" OnReadData="Store_ReadData" >
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:JsonReader Root="data" />
                                </Reader>                         
                            </ext:PageProxy>
                        </Proxy>
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="OrgID" Type="Int"  />
                                    <ext:ModelField Name="ContactID" Type="Int"  />
                                    <ext:ModelField Name="OrgName" Type="String" />
                                </Fields>
                            </ext:Model>
                        </Model>

                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server" >
                    <Columns>
                        <ext:Column runat="server" ID="OrgID" Text="OrgID" DataIndex="OrgID" Width="50" ClientIDMode="Static" Sortable="true"    />
                        <ext:Column runat="server" ID="ContactID" Text="ContactID" DataIndex="ContactID" Width="50" ClientIDMode="Static"  />
                        <ext:Column runat="server" ID="OrgName" Text="OrgName" DataIndex="OrgName" Flex="1"   />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView ID="GridView1" runat="server" TrackOver="false" />
                </View>
                <Features>
                    <ext:GridFilters ID="myFilters" runat="server" ClientIDMode="Static">
                        <Filters>
                            <ext:NumericFilter DataIndex="OrgID" />
                            <ext:NumericFilter DataIndex="ContactID" />
                            <ext:StringFilter DataIndex="OrgName" />
                        </Filters>
                        <CustomConfig>
                            <ext:ConfigItem name="tttt"> <ext:Parameter Name="testtest" Value="1" /></ext:ConfigItem>
                        </CustomConfig>               
                    </ext:GridFilters>
                </Features>
</ext:GridPanel>

Now, Store_ReadData fires only the first time when the page loads, and doesn't fire again when I scroll. Am I missing something?

[MacGarnicle]

Okay, so I've:
- Downloaded latest Ext.NET source code and compiled.
- Downloaded Ext.NET.Examples source, added the Ext.NET reference.
- I went into to the Infinite_Scroll Overview example and I added (to the grid):

               <Features>
                    <ext:GridFilters ID="myFilters" runat="server" ClientIDMode="Static">
                        <Filters>
                            <ext:NumericFilter DataIndex="OrgID" />
                            <ext:NumericFilter DataIndex="ContactID" />
                            <ext:StringFilter DataIndex="OrgName" />
                        </Filters>
                    </ext:GridFilters>
               </Features>

- Build and run:
I get the exact same JavaScript error message that I did in my original posting: Uncaught TypeError: Cannot read property 'params' of undefined

What's next?

[Vladimir]

I tried GridFilters with infinite scrolling grid and there are no any errors
Though grid filters params are not passed to the server because infinite scrolling requires to use BeforePrefetch event
I fixed it and grid filters works fine on my side.

If you still have troubles then please provide test case (test sample which doesn't require any changes from our side)

[Vladimir]

Ok, I was able to reproduce the issue (just did not notice that you mentioned about scrolling in first post)
Fixed in SVN, please update and retest

Sorry for inconvenience

[MacGarnicle]

Thank you very much for fixing it so fast - it works now. If I find any more bugs I'll let you know.