1. 

   eugfri, Member

   hi,

   I have simple table that I want to display in nicely formatted html that would have one of the columns editable (with or without existing data) and so user could simply tab out of editable field and get to the same editable field on the next row. At the bottom of the table I would like to display SAVE button.

   For start, here is the stored proc code:

   SELECT 'dbr.hideheader'; SELECT 'dbr.search', 0;

   SELECT 'dbr.hidecolumn', 'ID';

   SELECT 'dbr.css', '.divtable { display:table; border:1px solid #666666;border-spacing:2px 2px;display:inline-block;empty-cells:show; }'; SELECT 'dbr.css', '.divrow { display:table-row;width:auto;clear:both; }'; SELECT 'dbr.css', '.partnumber { float:left;display:table-cell;width:200px;border:1px solid black;padding:2px;height:14px;width:95;}'; SELECT 'dbr.css', '.serialnum { float:left;display:table-cell;width:200px;border:1px solid black;padding:2px;height:14px;width:95;}';

   SELECT 'dbr.divify', 'divtable'; SELECT 'dbr.hidecolumns', 'divrow'; SELECT 'dbr.rowclass', 'divrow';

   SELECT 'dbr.record', 'begin', 'serialsrow';

   SELECT 'dbr.editable', '[serialnum]', 'sp_DBR_SerialsScans_edit_serial', 'inID=[ID]', 'inSerialNum=[serialnum]', 'options={width:150,height:12}'; SELECT ID, partnumber, serialnum, 'divrow' FROM ssn.partserialsstaging order by partnumber, serialnum desc; SELECT 'dbr.record', 'end';

   SELECT 'dbr.template', '#ScanSerialsDetails';

   SELECT "dummy"; SELECT 'dbr.button','SAVE'; SELECT 'dbr.report', 'sp_DBR_SaveSerials', 'inLogin=[inLogin]', 'saved'; SELECT 'dummy result set for the button';

   So I have a record #serialsrow and I show it in my template as a table with border etc.

   Right now in my template all I have is this:
   {#serialsrow}

   However, I have few issues.
   I need to show my editable field "always in the edit mode", i.e. so it would be obvious without clicking on it that is it editable, even if field has no value. I would like user to be table to navigate using tab key (in fact they want to use barcode scanner instead of manual typing on that screen).

   Also, my SAVE button under the table is not visible for some reason.

   Thank you!
2. 

   myDBR Team, Key Master

   Hi,
   to allow user navigation between the editable field using tab, you need to, by using JavaScript, catch the keydown even in the editable field, check if it is a tab then find the next editable field and click on.

   The code would look something like this:

   select 'dbr.javascript',"
   
   $(document).on('keydown', '.jeditableform>input', function(e) {
   
     if(e.keyCode==9) {
   
       var $cell;
   
       $(this).blur();
   
       if (window.event.shiftKey) {
   
         $(this).closest('.divrow').prev().find('.editable').click();
   
       } else {
   
         $(this).closest('.divrow').next().find('.editable').click();
   
       }
   
       return (e.keyCode!=9);
   
     };
   
   });
   
   ", 'onload';
   
   

   If the SAVE-button is not visible, most likely you have not added sp_DBR_SaveSerials as a report or the user does not have access rights to it.

   --
   myDBR Team
3. 

   eugfri, Member

   Works like a charm. Thank you very much!

Reply

You must log in to post.