Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
atuan1112 opened this issue May 19, 2017 · 0 comments

Comments

@atuan1112
Copy link

atuan1112 commented May 19, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant