InfiniteScroll grid with filterheader

  1. #1

    InfiniteScroll grid with filterheader

    Hi Fabricio,

    Per our conversation two days ago, I have downloaded a sample of the InfiniteScroll grid, and added Plugins -> FilterHeader to it. The filter header row appears without any special tricks required, unlike in our application. However, it does not support filtering, as the back-end code in the sample does not contain any filterheader functionality, nor do I knkow how to implement such quickly since, as already mentioned, I am new to EXT/ExtJs.

    Can you provide a sample that shows InfiniteScroll and FilterHeader working together properly with a Sql Backend such as Northwind or AdventureWorks?

    The back-end in the sample I downloaded just uses dynamically generated data that I don't believe would work with FilterHeader parameters.
    for (int i = start + 1; i <= start + limit; i++)
                StockQuotation qoute = new StockQuotation()
                    Company = "Company " + (desc ? 50000 - i + 1 : i),
                    Price = randow.Next(0, 200),
                    LastUpdate = now
    We need to see a proof of function here so that we can get this grid working without the flicker/reload issue we see currently.

  2. #2
    Hello @rgraham,

    There are two vertents we may follow here. Local (client-side) data and filter and remote (server-side) data and filter.

    Either local data with remote filter or the other way around won't make much sense, so first take a look at the simpler approach: local data and local filter. I have just published them to our Examples Explorer. You can also download + build + run the Examples Explorer Project from GitHub.

    - GridPanel > FilterHeader > Buffered_Local_Sql

    Notice the "local" approach consists in fetching the full data set from server side and providing it as a compact-sized record set, which is all the time within the Store in the page.

    The above example is a mix-up of ideas highlighted in the following ones:
    - GridPanel > Infinite_Scrolling > Overview
    - GridPanel > FilterHeader > Overview
    - GridPanel > DataSource_Controls > SqlDataSource

    Even for a table of, say, 10,000 records, this seems something feasible to be all local given the nowadays computers' resources. Of course you should not impart with data you never want to be displayed in the customer's interface, but that goes beyond our scope here.

    Now, provided you have a real huge history data you only want to load at client-side part of it at a time, then you'd have to switch to a server-side approach. This is the approach highlighted in the GridPanel > Infinite_Scrolling > Overview example, simplified down to 200-row-long queries each time. Using the concepts you asked, the sample is turned into:

    - GridPanel > FilterHeader > Infinite_Remote_Sql

    Please notice specifics about SQL, SQLServer and so on are beyond the scope of Ext.NET, if you have questions about how a query works (or not), it is likely we won't be able to help you. Fortunately, there are plenty of SQL resources if you look around google, stack overflow, etc.

    Back to the example, here we fetch chunks of data from the SQL server, and also adjust the query constraints given the search terms, if any. Notice how the complexity escalates up; now we are handling a lot from the server. When dealing with server-side queries (remote filtering), it is necessary to handle the filters in the server as well, so you'll have to work up the query constraints given the filter. We only made server-side filtering implementations for numeric and string types; there are also boolean and date types, expanding it is just a matter of including the types in the tests. We also left the columns non-sortable to keep the code to a minimum.

    A full implementation of the server side methods is dependent on the data you are working with and an example implementing also the string sub-operators, date and boolean types is GridPanel > FilterHeader > Remote. It also features paging and sorting in the same Example.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Grid FilterHeader -- too many calls to the custom function
    By susanz in forum 4.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 05, 2016, 3:54 AM
  2. [CLOSED] Custom filterHeader + grid reconfig issue
    By susanz in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 26, 2016, 9:53 PM
  3. [CLOSED] FilterHeader : FilterHeader for specific columns in gridpanel
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 29, 2015, 12:20 PM
  4. [CLOSED] toggle grid filterheader
    By susanz in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 18, 2014, 4:04 PM
  5. [CLOSED] [#514] Print Grid With FilterHeader
    By snow_cap in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 29, 2014, 7:35 PM

Posting Permissions