Hi,
I used "indirectSelectColumn" + "extendedSelectRow" + "pagination" to create grid with select-all checkbox. But it does not work well with QueryStore.
Issue:
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.
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();
Hi, I used "indirectSelectColumn" + "extendedSelectRow" + "pagination" to create grid with select-all checkbox. But it does not work well with QueryStore.
Issue:
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):
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:
Gridx config:
tests.zip