Get Filtered Data

Is it possible to get the data that is rendered in the grid after applying the filter? I tried using Data source which gives the entire data of the grid. I also tried "allRows" and "rows" methods but that gives the data that is available in the page. If the data is more than one page, I am not getting the entire filtered data. Let me know if this is possible.

Thanks

Guru

Hi Guru,

The only way currently available is to utilize the igGrid's internal igDataSource – you need to call that igDataSource's dataView() method in order to get the filtered data. 
If we use the igGrid from the Filtering sample, the JavaScript you need to use is:

$("#grid1").data("igGrid").dataSource.dataView()

Hope this helps,
Borislav 

Hi Borislav,

Thanks for the response. I even tried that but it is giving me the data that is rendered in the current page but not the entire data. Lets say my grid has 20 rows and I have paging enabled with 10 rows per page. Once I filter the data, if the data span to 2 pages (lets say 15 rows..2 pages) When I call dataView(), it just returns me 10 not 15. I used the same JavaScript that you mentioned. Let me know if that is not the case.

Thanks

Guru

Guru,

Right now you're asking me the exact opposite of your first question 🙂
The igDataSourcehas two data holders which are accessed by the API methods :

• the dataView()  – as mentioned in the API method's description, it "the current normalized/transformed and paged/filtered/sorted data, i.e. the dataView."
• the data() – this is the entire data that the igDataSource is bound to – without any pagination, filtering or sorting.

However, the trick is that if your data is remote and paging is remote as well, the data and dataView are absolutely the same because a request for new data is made each time a page size/index is changed.

I know that this may seem a bit confusing a first so can you please let me know if

1. your data is remote (i.e. a URL to a web service)?
2. is paging remote? 
3. is filtering remote?

Depending on the answer, I will be able to tell you if it's possible to get a hold of the data you need.

Looking forward to your reply.
Cheers,
Borislav 

Borislav,

I am just trying this with local data right now. I have a local JSON data which has 20 rows and I have bound that to the grid. I have enabled Paging and Filtering. As I said, If I had paging with 10 rows per page, my grid will have 2 pages. If I do a filtering based on a column and suppose that resulted in 15 rows of data, it will render it in 2 pages (1st page 10 rows, 2nd page 5 rows). Now if I call dataView(), it is returning 10 but I need the entire filtered data which is 15.

Thanks

Guru

Thanks for the clarifications – they really help out!
I'm afraid that what you are asking isn't available out of the box right now 🙁

However, I think there is a way to circumvent the lack of a data view which satisfies your requirements (local data, local paging and local filtering).
Here is a sample of how to get the data view you need (yes, I'm afraid this approach requires (deep) copying and working with the igDataSource of the grid):

$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2049/js/",
    cssPath: "http://cdn-na.infragistics.com/jquery/20121/2049/css/",
    resources: 'igGrid.*',
    ready: function() {
        $('#grid1').igGrid({
            virtualization: false,
            autoGenerateColumns: false,
            width: '500px',
            height: '500px',
            columns: [
                { headerText: "Product ID", key: "ProductID", width: "100px", dataType: "number" },
                { headerText: "Units in Stock", key: "UnitsInStock", width: "150px", dataType: "number" },
                { headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string" },
                { headerText: "Unit Price", key: "UnitPrice", width: "100px", dataType: "string" }
            ],
            dataSource: namedData,
            features: [
                {
                    name: "Paging",
                    type: "local"
                },
                {
                    name: "Filtering",
                    type: "local"
                }
            ]
        });
        
        //Filter the grid with a good enough condition so that we can have at least one record on the 2nd page
        $('#grid1').igGridFiltering("filter", [{fieldName: "ProductDescription",cond:"contains",expr:"fish"}]);
        
        var filteredDataSource = $.extend(true, {}, $("#grid1").data("igGrid").dataSource);
        // we need to disable the paging feature so that the dataView() can represent only the filtered data.
        filteredDataSource.settings.paging.enabled = false;
        // Filter the copy of the igGrid's internal igDataSource in order to receive the desired data view
        filteredDataSource = filteredDataSource.filter($("#grid1").data("igGrid").dataSource.settings.filtering.expressions);
        alert("Number of filtered results: " + filteredDataSource.dataView().length);
    }
});

PS: I'm also attaching an HTML sample demonstrating the code.
Hope this helps,
Borislav