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.

Sign up for GitHub

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

Jump to bottom

Dgrid selector inconsistently working in touch screen devices like ipad dgrid/v1.1.0 #1476

Closed
pnaqati opened this issue Sep 17, 2020 · 10 comments · Fixed by #1480
Closed

Dgrid selector inconsistently working in touch screen devices like ipad dgrid/v1.1.0 #1476

pnaqati opened this issue Sep 17, 2020 · 10 comments · Fixed by #1480

Comments

@pnaqati
Copy link

pnaqati commented Sep 17, 2020

My dgrid's selection and selector with selectionMode : none perfectly works in any browser. However , recently I found that there is an issue with selection when using touch screen devices like ipad and on touch screen lenova laptop. I have another view where it works in touch screen as well but the difference is that dgrid is directly created in a parent div. In another use case where it fails in touch screen only is that when dgrid is inserted in the parent tabcontainer.

Following is the code snippet:

var generateComListStore=function(){

		require([		        
				'dojo/_base/declare',				
				'dstore/Rest',			
				'dgrid/Grid',			
				 "dgrid/Selection",
				 'dgrid/extensions/Pagination',	
				 "dgrid/Selector",		     	        
		], function (declare,Rest,Grid,Selection,Pagination,Selector) {
			
		var rowsPerPage =50;
		var pageUrl= "/Company/";
		//catalogueStore = declare([ Rest, Trackable ]);
		compListStore= new Rest({ target: pageUrl,idProperty:'compcode',rangeStartParam: 'offset',rangeCountParam: 'limit'});			
		comListGrid = new (declare([ Grid,Selection,Pagination,Selector]))({	
		id: 'comListGrid123',			
		showHeader :true,				
		pageSizeOptions: [50,100,200,400],
		pagingLinks: false,
		pagingTextBox: true,
		showLoadingMessage:true,
		firstLastArrows: true,
		rowsPerPage: rowsPerPage,
		offset:0,		
		selectionMode:'none',  		
        allowSelectAll:true, 
        showLoadingMessage:true,            
		collection:compListStore,			
		columns:{
			col1: {selector: 'checkbox',  label:''} ,				
		    companyname: 'Company',
		    status:'Status',
		    description: 'Description'   
		},	
		
        loadingMessage: "Loading data...",
        noDataMessage: "No results found."
		}); 
		dojo.byId("gridCompListContainer").appendChild(comListGrid.domNode);	
		//compListPane.addChild(comListGrid);			
		comListGrid.startup();
		//compListPane.startup();				
		doOnOrientationChange();			
		comListGrid.on('.dgrid-row:click', function (event) {			
		     var cell = comListGrid.cell(event);			    
	         var pageUrl= "/checkValidSession";     
		     require(["dojo/request"], function(request){
			 request(pageUrl).then(function(data){            
				 if(data == 1){
					 if(cell.column.id != 'col1')
					    showCompany(cell.row.data.companyname);
				 }else{
	                window.location="/login?error=sessionExpired";
				 }
			 });
		   });  
		
		});
});

}
@pnaqati
Copy link
Author

pnaqati commented Sep 19, 2020 •
edited
Loading

I even upgraded to dgrid version 1.3.3 but issue stll remains. In touch screen It selects the rows even if selector checkbox is not checked

@msssk
Copy link
Contributor

msssk commented Sep 23, 2020

@pnaqati can you clarify in what way dgrid is not working? I have created a grid with your settings and did not find any problems with selection in Safari on iOS or Chrome/Firefox on Android.

Based on your description it sounds like you may be creating a dgrid instance as a descendant of a DOM element that is not initially visible. Some dgrid functionality is dependent on the dgrid DOM node being visible and in the document flow when dgrid is started up. For example, when dgrid is used within a tab that is not initially visible dgrid's startup method should NOT be called before the tab is selected and made visible. Only after the tab has been selected and its content made visible should grid.startup() be called.

@pnaqati
Copy link
Author

pnaqati commented Sep 23, 2020

The dgrid is programmatically inserted into a tabcontainer which is already created . It works perfectly in any browser except that in touch screens the selector checkbox exhibits inconsistent behaviour.
check following code
dojo.byId("gridCompListContainer").appendChild(comListGrid.domNode);
//compListPane.addChild(comListGrid);
comListGrid.startup();

I am appending it to the tabcontainer div which is a parent dom and first tabpane as shown below.

I have another view where dgrid is directly inserted into parent div dom and it works there .
I think you need to test it in tab dijit/layout/TabContainer having descendents as various tabpanes dijit/layout/ContentPane.

Please do let me know If you think there is any info you need.

@pnaqati
Copy link
Author

pnaqati commented Sep 25, 2020

I have some good news for you , It happens when I add "dojox/mobile/Switch" to the header of page. You guys can easily produce it now. It works perfectly when I remove switch and recurs when I add switch

@pnaqati
Copy link
Author

pnaqati commented Sep 26, 2020 via email

@msssk
Copy link
Contributor

msssk commented Sep 26, 2020

@pnaqati can you describe what behavior you are observing? It would be very helpful if you could provide a test case as well. I have done some testing with a grid based on the code provided in this issue and the grid works well.

Test case 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>dgrid Test</title>
	<link rel="stylesheet" href="../dgrid/css/dgrid.css">
	<link rel="stylesheet" href="../dgrid/css/skins/claro.css">
	<link rel="stylesheet" href="../dojox/mobile/themes/ios7/ios7.css">
	<style>
		input[type=checkbox] {
			height: 20px;
			width: 20px;
		}
	</style>
</head>

<body>
	<div id="switch"></div>
	<div id="grid" class="claro"></div>
	<script>
	var dojoConfig = {
		async: true,
		baseUrl: '../',
		packages: [
			'dojo',
			'dijit',
			'dojox',
			'dgrid',
			'dstore'
		]
	};
	</script>
	<script src="../dojo/dojo.js"></script>
	<script>
require([
	'dojo/_base/declare',
	'dstore/Memory',
	'dstore/Trackable',
	'dgrid/Grid',
	'dgrid/OnDemandGrid',
	'dgrid/Keyboard',
	'dgrid/Selection',
	'dgrid/Selector',
	'dgrid/extensions/Pagination',
	'dojox/mobile/Switch'
], function (declare, Memory, Trackable, Grid, OnDemandGrid, Keyboard, Selection, Selector, Pagination, Switch) {
	var mySwitch = new Switch(null, document.getElementById('switch'));
	mySwitch.startup();

	var store = new (declare([Memory, Trackable]))({
		data: createData()
	});

	var grid = new (declare([Grid, Selection, Pagination, Selector]))({
		collection: store,
		showHeader: true,
		pageSizeOtpions: [50, 100, 200, 400],
		pagingLinks: false,
		pagingTextBox: true,
		showLoadingMessage: true,
		firstLastArrows: true,
		rowsPerPage: 50,
		offset: 0,
		selectionMode: 'none',
		allowSelectAll: true,
		loadingMessage: 'Loading data...',
		noDataMessage: 'No results found.',
		columns: {
			column0: {
				label: '',
				selector: 'checkbox'
			},
			First_Name: {
				label: 'First Name'
			},
			Last_Name: {
				label: 'Last Name'
			},
			thrid: {
				label: 'thrid'
			},
			froth: {
				label: 'froth'
			}
		}
	}, 'grid');

	grid.startup();

	function createData() {
		var data = [];
		var column;
		var i;
		var item;

		for (i = 0; i < 50; i++) {
			item = {};
			for (column in { First_Name: 1, Last_Name: 1, thrid: 1, froth: 1 }) {
				item.id = i;
				item[column] = column + '_' + (i + 1);
			}
			data.push(item);
		}

		return data;
	}
});
	</script>
</body>
</html>

@pnaqati
Copy link
Author

pnaqati commented Sep 26, 2020 via email

@pnaqati
Copy link
Author

pnaqati commented May 5, 2021 via email

@edhager edhager mentioned this issue May 13, 2021
Merged
@edhager
Copy link
Member

edhager commented May 13, 2021

@pnaqati I landed a fix in master that fixes an issue I saw with the selector checkbox on touch devices. Please try it out and let me know if the fix works for you.

@pnaqati
Copy link
Author

pnaqati commented May 13, 2021 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix bug with selector checkboxes on touch devices SitePen/dgrid
3 participants
@msssk @edhager @pnaqati