InfiniteScroll grid with filterheader

[rgraham]

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
            };

            data.Add(qoute);
        }

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.

Thanks.

[fabricio.murta]

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!