How to get filtered rows from GridX?

Question

I'm using Dojo GridX with many modules, including filter:

grid = new Grid({
    cacheClass : Cache,
    structure: structure,
    store: store,
    modules : [ Sort, ColumnResizer, Pagination, PaginationBar, CellWidget, GridEdit,
         Filter, FilterBar, QuickFilter, HiddenColumns, HScroller ],
    autoHeight : true, autoWidth: false,
    paginationBarSizes: [25, 50, 100],
    paginationBarPosition: 'top,bottom',
}, gridNode);
grid.filterBar.applyFilter({type: 'all', conditions: [
    {colId: 'type', condition: 'equal', type: 'Text', value: 'car'}
]})

I've wanted to access the items, that are matching the filter that was set. I've travelled through grid property in DOM explorer, I've found many store references in many modules, but all of them contained all items.

Is it possible to find out what items are visible in grid because they are matching filter, or at least those that are visible on current page? If so, how to do that?

Answer 1

My solution is:

try {
    var filterData = [];
    var ids = grid.model._exts.clientFilter._ids;
    for ( var i = 0; i < ids.length; ++i) {
        var id = ids[i];
        var item = grid.model.store.get(id);
        filterData.push(item);
    }
    var store = new MemoryStore({
        data : filterData
    });

} catch (error) {
    console.log("Filter is not set.");
}

Answer 2

I was able to obtain filtered gridX data rows using gridX Exporter. Add this Exporter module to your grid. This module does exports the filtered data. Then, convert CSV to Json. There are many CSV to Json conversion javasripts out there.

this.navResult.grid.exporter.toCSV(args).then(this.showResult, this.onError, null)

Answer 3

Based on AirG answer I have designed the following solution. Take into account that there are two cases, with or without filter and that you must be aware of the order of rows if you have applied some sort. At least this works for me.

    var store = new Store({
        idProperty: "idPeople", data: [
            { idPeople: 1, name: 'John', score: 130, city: 'New York', birthday: '31/02/1980' },
            { idPeople: 2, name: 'Alice', score: 123, city: 'Wáshington', birthday: '07/12/1984' },
            { idPeople: 3, name: 'Lee', score: 149, city: 'Shanghai', birthday: '8/10/1986' },
            ...
        ]
    });
    
    gridx = new GridX({
        id: 'mygridx',
        cacheClass: Cache,
        store: store,
        ...
        modules: [
            ...
            {
                moduleClass: Dod,
                defaultShow: false,
                useAnimation: true,
                showExpando: true,
                detailProvider: gridXDetailProvider
            },
            ...
        ],
        ...
    }, 'gridNode');
    
    
    function gridXDetailProvider (grid, rowId, detailNode, rendered) {
        gridXGetDetailContent(grid, rowId, detailNode);
        rendered.callback();
        return rendered;
    }
    
    function gridXGetDetailContent(grid, rowId, detailNode) {
        if (grid.model._exts.clientFilter._ids === undefined || grid.model._exts.clientFilter._ids === 0) {
            // No filter, with or without sort
            detailNode.innerHTML = 'Hello ' + grid.row(grid.model._cache._priority.indexOf(rowId)).item().name + " with id " +
                                grid.row(grid.model._cache._priority.indexOf(rowId)).item().idPeople;
        } else {
            // With filter, with or without sort
            detailNode.innerHTML = 'Hello ' + grid.row(grid.model._exts.clientFilter._ids.indexOf(rowId)).item().name + " with id " +
                                grid.row(grid.model._exts.clientFilter._ids.indexOf(rowId)).item().idPeople;
        }
    }

Hope that helps, Santiago Horcajo

Answer 4

function getFilteredData() {
    var filteredIds = grid.model._exts.clientFilter._ids;

    return grid.store.data.filter(function(item) {
        return filteredIds.indexOf(item.id) > -1;
    });
}