EasyUI Forum
April 29, 2024, 01:22:57 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: propertygrid : keyboard navigation  (Read 2486 times)
mrblint
Newbie
*
Posts: 1


View Profile
« on: May 24, 2019, 03:46:38 AM »

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
Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: May 25, 2019, 07:36:00 AM »

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)
}
})
}
})
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!