PDA

View Full Version : [CLOSED] Infinite Scrolling Grid with GridFilter feature - JavaScript Error



MacGarnicle
Apr 03, 2012, 7:32 PM
Hello,

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

http://examples2.ext.net/#/GridPanel/Infinite_Scrolling/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
Apr 03, 2012, 9:39 PM
Hi,

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

MacGarnicle
Apr 03, 2012, 9:44 PM
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
Apr 03, 2012, 9:50 PM
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
Apr 03, 2012, 10:58 PM
*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
Apr 03, 2012, 11:29 PM
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
Apr 04, 2012, 8:53 AM
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
Apr 04, 2012, 10:18 AM
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
Apr 04, 2012, 2:06 PM
Thank you very much for fixing it so fast - it works now. If I find any more bugs I'll let you know.