CODEWITHSUNDEEP
dojodojo.gridx
Cjxcz Odjcayrwl
Cjxcz Odjcayrwl

Reputation: 22847

How to get filtered rows from GridX?

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?

Upvotes: 0

Views: 1600

Answers (4)

Marv Dann
Marv Dann

Reputation: 1

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

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

Upvotes: 0

Santiago Horcajo
Santiago Horcajo

Reputation: 23

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

Upvotes: 0

AirG
AirG

Reputation: 11

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.");
}

Upvotes: 1

PiGG
PiGG

Reputation: 29

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)

Upvotes: 0

Related Questions