Touchscreen Support

Unlike most other data grids and tables out there, DataGridXL makes a serious effort to work on mobile (touchscreen) devices.

For now, DataGridXL offers only Read Only features on touch devices:

• Select cells, rows & columns
• Open Context Menu (touch) for copy command
• Resize columns

The touch version does not include the paste command. The Copy & Paste article has a section that explains the reasons behind that.

Our goal is to eventually add all common edit features, such as:

• Edit cell values
• Rows: move, insert, delete
• Columns: move, insert, delete, resize

Edit on touch screens

Even though editing cell values is not yet enabled out-of-the-box, you could use a custom <input> and hook it up with methods:

<!-- html -->
<div id="grid"></div>
<input type="text" id="editor">
<button id="button-cancel">cancel</button>
<button id="button-save">save</button>
<!-- script -->
<script>

	// create grid
	var grid = new DataGridXL("grid", {
		data: [ ... ]
	});

	// get refs to nodes
	var editorNode = document.getElementById("editor");
	var saveButtonNode = document.getElementById("button-save");
	var cancelButtonNode = document.getElementById("button-cancel");

	editorNode.onfocus = function(){
		grid.openEditor();
	}

	saveButtonNode.onclick = function(){
		grid.closeEditorAndSave();
		editorNode.value = "";
		editorNode.blur();
	}

	cancelButtonNode.onclick = function(){
		grid.closeEditor();
		editorNode.value = "";
		editorNode.blur();
	}
}

</script>

Context Menu

Touch screen devices have their own context menu. This context menu shows up when you long-touch the component, or tap inside your current cell selection.

The items inside contextMenuTouch can be customized. Head over to our Context Menu article to learn how to replace the default items.