[OPEN] [#308] FilterHeader and infinite scrolling

[HansWapenaar]

Hi,

I was working on filter headers in an application and after getting the latest release of Ext.Net I saw a new example of 'FilterHeader' in GridPanels.
I also found the option of infinite scrolling and was wondering whether these two options could be combined. Is that possible?

I tried something bij editing the example but got an error message:
'method filterBy is not supported'
It is in a line: return (me.snapshot || me.data).filterBy(fn, scope || me);


What I did:

Take FilterHeader\Overview\Default.aspx
Remove the pagingtoolbar.
Adjust the store (toke lines from example Infinite_Scrolling\Overview\Default.aspx:

<ext:Store runat="server" ID="Store1" 
   Buffered="true" 
   PageSize="200" 
   TrailingBufferZone="10"
   LeadingBufferZone="10">

I removed the buttons from the example because there were directly error message about non supported 'getAttribute'.


So, the question is whether it is possible to add filterheaders to a store with infinite scrolling, and if so, what I am doing wrong?

Thanks, Hans

[Vladimir]

Please clarify do you need local or remote filtering?

Buffered option should be used if you need request a data in parts from the server (it is like paging, just paging is handled by scroller)
So, buffered option is server side paging therefore remote filtering can be used (you need to set Remote=true for FilterHeader and handle filtering on the server side like in FilterHeader\Remote\Default.aspx)

If you need local filtering and all data on the client then you need to use BufferedRenderer plugin (https://examples2.ext.net/#/GridPane...red_Scrolling/) instead buffered option. In this case, local filtering in FilterHeader works fine

I removed the buttons from the example because there were directly error message about non supported 'getAttribute'.

Can you elaborate it? How we can reproduce it? Or it is reproduced with buffered store only and local filtering (it is incorrect combination)?

[HansWapenaar]

Hi Vladimir,

I will start with your last question.
I now adjusted the example of GridPanel/FilterHeader/Remote/Default.aspx

- removed the bottombar with the pagingtoolbar
- adjusted the store:

                        <ext:Store runat="server" 
                            ID="Store1" 
                            RemoteSort="true"
                            OnReadData="Store_ReadData"
                            Buffered="true" 
                            PageSize="200" 
                            TrailingBufferZone="10"
                            LeadingBufferZone="10" >

Then when I run the source code the gridpanel is shown in the browser but as soon as I move the mouse over a row an error appears:
'JavaScript runtime error: The property or method getAttribute is not supported by this object'.

Error shows in:

    // ----- remove in the next release (start) ---- The github issue #264.
    getRecord: function (node) {
        var record;

        node = this.getNode(node);
        if (node) {
            record = this.dataSource.data.get(node.getAttribute('data-recordId'));    // this row is highlighted as error!
        }

        if (!record) {
            record = this.callParent(arguments);
        }

        return record;
    },

I use IE10 and downloaded the latest Ext.Net (SVN) yesterday morning.

It looks like it that filtering is working a long as I do not move the mouse over the records.

Thanks, Hans

[Vladimir]

Thanks for the report, the issue is not related with FilterHeader plugin but it is fixed in SVN. Please update and retest

[HansWapenaar]

Hi Vladimir,

I updated and retested.
The data is shown now in the gridpanel. I can also filter on company. For example filling in 'A' will result into al companies starting with an A. But when removing the filter I sometimes get the error:
Runtime-fout JavaScript: Ext.data.Store.getById(): getById called for ID that is not present in local cache

Sometimes means: when setting the filter, selecting a record by clicking on it and then removing the filter. When no record is selected, the filter is removed correctly. When a record is selected removing the filter generates the error.

When filling in a filter for the column price I sometimes get the following error:
Runtime-fout JavaScript: Ext.data.PageMap.getRange(): PageMap asked for range which it does not have

I cannot find any logic yet when this error appear and when it doesnot.

Hans

[Vladimir]

Thanks for your answer. I will try to reproduce the issue
Buffered functionality should be fixed in ExtJS 4.2.2

I will notify you if i will not able to reproduce the issue

[HansWapenaar]

Hi Vladimir,

When will ExtJS 4.2.2 be part of Ext.Net?

Is it correct that the version number of ExtJs that is used is written in ../premium/Ext.Net/App_Readme/Sencha.txt? (now: Ext JS 4.2 - JavaScript Library)

Hans

[Daniil]

When will ExtJS 4.2.2 be part of Ext.Net?

Shortly after it releases. Currently, it is not released and I didn't see any official time frame. However, I think it might be soon.

Is it correct that the version number of ExtJs that is used is written in ../premium/Ext.Net/App_Readme/Sencha.txt? (now: Ext JS 4.2 - JavaScript Library)

Yes, it is a way, but it doesn't specify 4.2.x which might be important.

As for our public releases the most solid way to determine underlying ExtJS version is:
http://www.ext.net/download/

You can find Ext.NET 2.2.0 (Includes Ext JS 4.2.0) there.

As for the SVN trunk. Running

Ext.getVersion()

in JavaScript console looks the quickest way to determine of underlying ExtJS version.

However, there were precedents when Sencha forgot update the things which are returned by the getVersion() method. So, if the ExtJS version is very critic to know for sure, the best way is to ask us.


Currently, the trunk uses ExtJS 4.2.1.

[Vladimir]

Hi

it seems it is known bug in ExtJS
http://www.sencha.com/forum/showthread.php?258739
http://www.sencha.com/forum/showthre...vaScript-error
http://www.sencha.com/forum/showthread.php?262118

At this moment, I can suggest to clear selection before filtering

<ext:FilterHeader runat="server" Remote="true">
       <Listeners>
               <BeforeFilter Handler="this.grid.getSelectionModel().deselectAll();" />
       </Listeners>
</ext:FilterHeader>

It seems it prevents that js error

[Daniil]

Created an Issue to track the open Sencha bug.
https://github.com/extnet/Ext.NET/issues/308