Print Page - propertygrid : keyboard navigation

I am porting a "line of business" Windows desktop application to the web. The users would like me to keep the web version as close as possible to the desktop version. It uses a property-grid for all of its data-entry forms. The propertygrid will contain many sections and each section will have many fields (rows).

They are used to using the TAB key to move focus forwards and SHIFT-TAB to move focus backwards through the propertygrid rows.

Is there a setting in the EasyUI propertygrid to enable such keyboard navigation? Or is this functionality to be provided by the developer? If so, is there an event-hook to capture the keystroke and a setFocus() function?

Thanks

Here is sample code to achieve this feature.

Code:

var pg = $('#pg');
pg.propertygrid({
	onBeginEdit: function(index){
		var ed = $(this).propertygrid('getEditors',index)[0];
		var t = $(ed.target);
		if (t.hasClass('textbox-f')){
			t = t.textbox('textbox');
		}
		t.bind('keydown', {index:index}, function(e){
			if (e.keyCode == 9){
				e.stopPropagation();
				var rowCount = pg.propertygrid('getRows').length;
				var index = e.data.index;
				pg.propertygrid('endEdit', index);
				index = e.shiftKey ? index-1 : index+1;
				if (index < 0){
					index = rowCount - 1;
				}
				if (index >= rowCount){
					index = 0;
				}
				pg.propertygrid('selectRow', index)
				pg.propertygrid('beginEdit', index)
			}
		})
	}
})

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mrblint on May 24, 2019, 03:46:38 AM