Editform in Data Grid

Questions and answers on designing your Servoy solutions, database modelling and other 'how do I do this' that don't fit in any of the other categories

Editform in Data Grid

Postby swingman » Wed Apr 12, 2023 9:25 am

Hi all,

I'm using data grids in NG-Client 2021.12. I'm trying to use an edit-form on a column in the grid and have set one up following the example in

viewtopic.php?f=69&t=22918.

My form has more than one field. The grid shows a summary of the information entered on the edit-form.
How do I get the form to stay open until the user clicks either a Save or Cancel button?
Right now it closes as soon as you exit the first field...
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Editform in Data Grid

Postby tom1676136946 » Thu Apr 13, 2023 1:08 am

Hi Christian,
Clarification:
Are you saying that the editForm specified in the grid column has more than one field?
In my case my cell edit form has a single field (for the single column).
The edit form has buttons Cancel and Save and remains open until either is clicked.

If you want to have the cell edit form have more than one field then you might consider the following:

The value to be passed in and back to be a "serialization" of the fields and their values in the cell editForm as a json object.
The tricky bit seems to be to invoke the de-serialization due to the save button (cell stop editing event).
I have not done it yet but I could have a look as an interesting challenge...

What is needed is an event to fire/call a parent form method when the cell editing stops (possibly onRecordEdit stop?)
Yes tricky.

Pity you cannot use cell right click to perform for each cell a cell editor.
Or perhaps I misinterpret.
Tom
tom1676136946
 
Posts: 5
Joined: Sat Feb 11, 2023 7:35 pm

Re: Editform in Data Grid

Postby swingman » Thu Apr 13, 2023 8:07 am

Hi Tom,

I think you have the right idea. Let me give some more background:

The users are collecting salary, bonus and package information, and depending on what type is being entered, the form will show different fields for data entry. The Data Grid shows a text summary (calculated field) of the information that has been entered.

My form opens fine when the user tabs into the column, and based on the package type it shows the correct fields and any existing data. I can edit and I can save the information and tell the grid that the data has been updated.

However, the problem is that the form closes as soon as I exit the first field by hitting the tab key; it does not stay open until I click the 'Done' button. Does the button need to be called 'Save'?

I'm wondering if I have to set some flag to stop it auto-closing...
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Editform in Data Grid

Postby tom1676136946 » Thu Apr 13, 2023 8:26 pm

I tried mine with tab key and all is fine here.
Maybe we can compare form setups?
Using latest bootstrap and servoy.

My parent form has a grouping table where:
event: onColumnFormEditStarted has this definition:
Code: Select all
/**
* Called when the column's form editor is started.
*
* @param {number} [foundsetindex]
* @param {number} [columnindex]
* @param {object} [value]
*
* @private
*
* @properties={typeid:24,uuid:"34B3E135-5D6B-4A50-ADA6-20792B9F1E4C"}
*/
function onColumnFormEditStarted_categories(foundsetindex, columnindex, value) {
   //use the column index to get the correct editor
   /** @type  {CustomType<aggrid-groupingtable.column>} */
   var col = elements.groupingtable_categories.getColumn(columnindex);
   /** @type {String} */
   var col_id = col.id;
   switch (col_id) {
   case 'note_id':
      custom_edit_note(value);
      break;
   
   default:
      application.output('PITC_0F_admin_categories_ng.onColumnFormEditStarted_categories Unknown column id: ' + col_id + ' for index: ' + columnindex,LOGGINGLEVEL.DEBUG);
      break;
   }
   return;
}


Which calls the function:
Code: Select all
/**
Custom editor for the note.
@param {object} value
* @private
*
* @properties={typeid:24,uuid:"3E19331A-12E7-48E6-A9AC-03B493B53A63"}
*/
function custom_edit_note(value) {
   var value_to_edit = '';//coerce to string
   if(value == null || value == undefined){
      value_to_edit = '';
   } else if (value instanceof String){
      value_to_edit = value;
      if(value_to_edit.length == 0){
         value_to_edit = '';
      }
   }
   forms.custom_cell_editor.vf_text = value_to_edit;//TODO only works for note which is text - needs upgrade for any object?
//   forms.custom_cell_editor.vf_text_box_a = null;//debug - ignore
//   forms.custom_cell_editor.vf_text_box_b = null;//debug - ignore
   return;
}


The custom_cell_editor form is a responsive layout:
The form has no events defined.
There is one label and one textarea. (Tested with text box as well). No events defined.
There are two buttons 'Cancel' and 'Save'. Both have onAction event defined:
onAction_save(event) and onAction_cancel(event).

Note that for the stopCellEditing call I do not have an argument - this was done about a year ago and I see now there is an update to the api.

Code: Select all
function onAction_cancel(event) {
   /*
    * on a form's 'properties' you will see an option 'encapsulation'
    * In that section you need to uncheck or set to false the 'Hide Elements', then they won't be private.
    */
      forms.PITC_0F_admin_categories_ng.elements.groupingtable_categories.stopCellEditing();
      return;
}


And the save is as follows.
I was messing about with the idea of multiple fields and hacked a json string - which works ok.
Code: Select all
/**
* @param {JSEvent} event
*
* @private
*
* @properties={typeid:24,uuid:"9FAA7871-3916-44F4-8F93-0D4F6DEAA6E6"}
*/
function onAction_save(event) {
   /*
    * on a form's 'properties' you will see an option 'encapsulation'
    * In that section you need to uncheck or set to false the 'Hide Elements', then they won't be private.
    */
   //create json object
   var json_obj = new Object();
   json_obj.text_box_a = vf_text_box_a;
   json_obj.text_box_b = vf_text_box_b;
   json_obj.text = vf_text;
   var json_str = JSON.stringify(json_obj);
   application.output("json_str= " + json_str);
   forms.PITC_0F_admin_categories_ng.elements.floatlabeltextbox_json.floatLabelText = json_str;
   
      forms.PITC_0F_admin_categories_ng.elements.groupingtable_categories.setFormEditorValue(vf_text);//vf_text
      forms.PITC_0F_admin_categories_ng.elements.groupingtable_categories.stopCellEditing();
      return;
}
tom1676136946
 
Posts: 5
Joined: Sat Feb 11, 2023 7:35 pm

Re: Editform in Data Grid

Postby tom1676136946 » Tue Apr 18, 2023 11:40 pm

Let us know the outcome, please?
tom1676136946
 
Posts: 5
Joined: Sat Feb 11, 2023 7:35 pm

Re: Editform in Data Grid

Postby swingman » Thu Apr 20, 2023 9:45 am

Hi Tom,

I tried, but still could not get the form to stay open so I went for a different approach:

- I added a value_text column as text. In the grid I display this as an editable text field (no form).
- When the data changes, I added regexes to extract numbers / percentages / currencies from the input depending on the type of data being entered, the extracted data is put into currency, percentage and value fields.
- And the value_text field gets replaced with the value that the regexes found.
Anything that is not accepted as a value goes into a separate 'comments' field.

Data entry is quite quick using this technique. Users happy.

Thank you for your help,
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Editform in Data Grid

Postby tom1676136946 » Sat Apr 22, 2023 10:14 pm

Surely this is worthy of an issue report in Servoy Jira?
tom1676136946
 
Posts: 5
Joined: Sat Feb 11, 2023 7:35 pm

Re: Editform in Data Grid

Postby swingman » Sun Apr 23, 2023 9:47 pm

My suspicion is that the reason it fails is because this project goes back to 2004 and an ancient version of Servoy.
It is mostly modernised now, but there may be something about how it is constructed or something left in the code or metadata causing this.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Editform in Data Grid

Postby tom1676136946 » Mon Apr 24, 2023 1:49 am

I see.
I vaguely remember there being a change to the behaviour a few years back about the edit form - so maybe it is the version you are using that is without the fix.
tom1676136946
 
Posts: 5
Joined: Sat Feb 11, 2023 7:35 pm


Return to Programming with Servoy

Who is online

Users browsing this forum: No registered users and 12 guests