[OPEN] [#308] FilterHeader and infinite scrolling

Page 1 of 2 12 LastLast
  1. #1

    [OPEN] [#308] FilterHeader and infinite scrolling

    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
    Last edited by Daniil; Jul 30, 2013 at 5:27 AM. Reason: [OPEN] [#308]
  2. #2
    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)?
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    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
  4. #4
    Thanks for the report, the issue is not related with FilterHeader plugin but it is fixed in SVN. Please update and retest
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    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
  6. #6
    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
    Vladimir Shcheglov
    Sr. Developer
  7. #7
    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
  8. #8
    Quote Originally Posted by HansWapenaar View Post
    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.

    Quote Originally Posted by HansWapenaar View Post
    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.
  9. #9
    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
    Vladimir Shcheglov
    Sr. Developer
  10. #10
    Created an Issue to track the open Sencha bug.
    https://github.com/extnet/Ext.NET/issues/308
Page 1 of 2 12 LastLast

Similar Threads

  1. Example of infinite scrolling without using proxy
    By yash.kapoor in forum 2.x Help
    Replies: 2
    Last Post: Jan 02, 2013, 8:12 AM
  2. [CLOSED] Infinite scrolling and selection
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 17, 2012, 9:45 AM
  3. [CLOSED] TreePanel infinite scrolling
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 06, 2012, 6:13 PM
  4. [CLOSED] Infinite Scrolling
    By rnachman in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 09, 2012, 6:03 PM
  5. [CLOSED] Infinite Scrolling
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 09, 2011, 7:15 PM

Posting Permissions