I have been experimenting with the grid and in particular a column where the edit type is Form and have set up the form as one field : a textarea.
I can get the form to popup over the grid column but the content is not as I want it to be.
What I want is the current value of the column data provider in the form and after edits to put the value back into the data provider.
Currently I thought it was sufficient to copy the current value to the edit form variable.
However this is not working - no data at all.
In the documentation there is mention of a custom cell editor and I tried to follow the wiki documentation but it is unclear to me.
I do get the onColumnFormEditStarted method with all the information but I am not sure how to get the column value to the edit form.
Also I do not understand where the setFormEditorValue method has to be used to save the edited value back.
Is there better explanation anywhere ?
Tom
Has anyone got an example code snippet to share for custom cell editor?
Hi Tom, I have exactly the same problem.
Did you work out how to do it?
an example of usage:
in the editor form you need this, a form variable (comment) linked to a text input field, and a button with action linked to onOk.
pressing Ok will simply update the edting cell with the value from the form editor input.
/**
* @type {String}
*
* @properties={typeid:35,uuid:"FF9E4962-F735-4D2A-B19D-35C9CE08F83F"}
*/
var comment = null;
/**
* @param {JSEvent} event
*
* @private
*
* @properties={typeid:24,uuid:"7FC5444B-2FC7-449C-844F-9BE6B472D0C8"}
*/
function onOK(event) {
forms.orders.elements.groupingtable_1.setFormEditorValue(comment);
forms.orders.elements.groupingtable_1.stopCellEditing();
}
in the form with the grid you need this, that will simply initialize the form variable from the form editor with the editing cell value
/**
* Called when the column's form editor is started.
*
* @param {number} [foundsetindex]
* @param {number} [columnindex]
* @param {object} [value]
*
* @private
*
* @properties={typeid:24,uuid:"7F7BF511-4079-43BA-8020-8C5F08E2E9DA"}
*/
function onColumnFormEditStarted(foundsetindex, columnindex, value) {
forms.commentEditor.comment = value;
}
@Gabi
Yes this works.
However I prefer to have a more object oriented approach.
I would have liked not to hard code the assignment of the cell value to the form variable:
forms.commentEditor.comment = value;
and the saving back of the edited result:
forms.orders.elements.groupingtable_1.setFormEditorValue(comment);
forms.orders.elements.groupingtable_1.stopCellEditing();
I would prefer to have a mechanism to automatically do the assign/save in the column custom editor in the onEvent processing.
One thing I have noticed is that if I have a text variable to pass to the onColumnFormEditStarted event function and the value is “empty”
Then in the custom editor the text is shown as [object Object] on display.
It is not null and it is not undefined.
I have to add a check for instanceOf String and then check for zero length and therefore set the value to edit to ‘’.
In the developer there is a warning flagged on:
forms.orders.elements.groupingtable_1.setFormEditorValue(comment)
The property elements is private
Why is elements a ‘private’?
How can one get the element without incurring the wrath of the warning?
(I prefer not to suppress any warnings).
Hi,
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.
AH yes, I did not realize that affected the checker!
Thanks!
@Gabi
Thanks for your earlier code samples, as I have now managed to get a form to appear when I double click on a cell in my grouping grid (set to editType=Form).
The save works fine for a text field, but when I try to use it for an image/media, the ‘save’ doesn’t work!
I duplicated the working ‘text’ form to create one for images, with the form variable set to type ‘Media’ in the variable editor.
I use the ‘File Upload’ component on the form to allow selecting an image, as well as having an ‘Image’ component to display the image (just so I can be sure it has actually loaded)
This does the save in the same way
forms.mobilePlotQCR.elements.table.setFormEditorValue(fv_photo);
forms.mobilePlotQCR.elements.table.stopCellEditing();
fv_photo has the image either passed from the grid if the row had an image set in the database, or shows a new image if one is chosen via uploader.
But nothing gets set in database when the form is saved/closed
Once again this seems to be a frustrating case of a lack of decent documentation/examples of how to do things, or if something isn’t supported (like saving images??)
I wouldn’t have been able to get anywhere with this if not for this post, but now I am stuck trying to do something that should (hopefully) work…
(BTW, on the subject of the documentation, the Wiki page
documents the Grouping Table Events as having params
foundsetIndex:Number, columnIndex:Number, oldValue:Object, newValue:Object, event:JSEvent, record:Object
but if you let Servoy create the method for this it misses out the ‘record’ parameter, which, once added in manually did work correctly & returned the correct record [I am using the grid by default in Grouped mode, but have tested the above issues in grouped & ungrouped with same issue] )
I hope that I am actually able to work with images & get the form editor to allow me to save them, or advise me how I can do it easily in the grouping grid.
Thanks
Rafi
Hi Rafi,
What about using a plain Form Popup to upload the image ?
you can keep the editType = NONE and show an actual Popup Form upon cellDoubleClick. Or you can also use the file plugins to ask the user to upload an image upon double click.
function onCellDoubleClick(foundsetindex, columnindex, record, event) {
var column = elements.table.getColumn(columnindex)
if (column.id == "picture") {
var popup = forms.editimg.createPopupForm(record, record.picture);
popup.x(event.getX())
popup.y(event.getY())
popup.show();
}
}
In the editImg form have something like:
/**
* @type {Array<byte>}
*/
var myPic = null;
/**
* @type {JSRecord}
*/
var myRecord;
function createPopupForm(record, data) {
myPic = data;
myRecord = record
var popup = plugins.window.createFormPopup(forms[controller.getName()])
return popup;
}
function onOK(event) {
myRecord.picture = myPic;
plugins.window.cancelFormPopup();
}
By the look of it, seems that was not expected to handle images and bytes in the column’s editForm, perhaps Gabi can have a better look at this. What is the reason to use the column’s editForm to upload an image ?
Regards,
Paolo
paronne:
By the look of it, seems that was not expected to handle images and bytes in the column’s editForm, perhaps Gabi can have a better look at this.
Hi Paolo,
thanks for the above ‘work around’, I changed to this & it now works (thankfully)!
It would be great, just for completeness, to allow images to work the way I had expected.
Thanks
Rafi