oria / gridx

Just another powerful Dojo grid
Other
162 stars 78 forks source link

Performance issue when using "indirectSelectColumn" + "extendedSelectRow" + "pagination" + QueryStore #415

Open atuan1112 opened 7 years ago

atuan1112 commented 7 years ago

Hi, I used "indirectSelectColumn" + "extendedSelectRow" + "pagination" to create grid with select-all checkbox. But it does not work well with QueryStore.

Issue:

  1. At page 1, every time I select/deselect a row, grid re-call "query" function of Store. Because in "query" function I implement a logic code to request data from our EIS (Enterprise information system), each time "query" function is called, a new request will be sent to EIS. --> the more rows be selected, the more requests be sent.
  2. Other page does not have this problem

Debug:

After a while debugging the code, I find out the flow of function: Selection changed ==> check page data in model is ready or not ==> check data in cache (THE WRONG CODE MAYBE IN HERE):

// File: gridx/core/model/cache/Async.js
// Function: findMissingIndexes()
// Line: 268, 269

var id = indexMap[j + 1];
if(!id || !self._cache[id]){
    //mark row with index "id" is missing and need to re-get it from server
}

When id = 0, (indexMap has item with index 0, or first item of first page), the condition of "if" become true, and the next code will be executed and re-get data from server ==> that's why problem only occur in the first page.

The following are some point in my code (See attach files):

QueryStore:

store = {
    query: function (query, options) {
        console.log(options);
        var def = new dojo.Deferred();
        def.total = new dojo.Deferred();

        // Real code using ajax function. setTimeout is used to represent asynchronous process
        setTimeout(function(){
            var data = [];
            for (var i = options.start; i < (options.start + options.count); i++) {
                data.push({
                    "id":i,
                    "Heard": true, 
                    "Progress": 0.5, 
                    "Genre":"Easy Listening:" + i,  
                    "Artist":"Bette Midler:" + i,   
                    "Year":"2003",  
                    "Album":"Bette Midler Sings the Rosemary Clooney Songbook:" + i,    
                    "Name":"Hey There", 
                    "Length":"03:31",   
                    "Track":4,  
                    "Composer":"Ross, Jerry 1926-1956 -w Adler, Richard 1921-", 
                    "Download Date":"1923/4/9", 
                    "Last Played":"04:32:49"
                });
            }
            var results = dojo.store.util.QueryResults(data);
            def.total.resolve(1000);
            def.resolve(results);
        }, 1000);
        return def;
    },
    getIdentity: function (item) {
        //alert(JSON.stringify(item));
        return item.id;
    }
};

Gridx config:

grid = new Grid({
    id: 'grid',
    cacheClass: AsyncCache,
    store: store,
    structure: layout,
    headerGroups: headerGroups,
    modules: [
        mods.VirtualVScroller,
        mods.CellWidget,
        "gridx/modules/Edit",
        "gridx/modules/CellWidget",
        "gridx/modules/GroupHeader",
        mods.Pagination,
        mods.PaginationBar,

        // For selection (checkbox, radiobutton)
        mods.IndirectSelectColumn,
        mods.ExtendedSelectRow, // for multiple with "select All" check box
    ],
    autoHeight:false,
    autoWidth:false,
    paginationBarSizes: [10, 30, 0],
    paginationInitialPageSize: 30,
    selectRowMultiple: true, // true for multiple and checkbox, false for single and radiobutton,
    selectRowTriggerOnCell: true,
    pageSize: 30,
    isAsync: false
});
grid.placeAt('gridContainer');
grid.startup();

tests.zip