Custom cell editor in Ng Grid

Forum to discuss the new web client version of Servoy.

Custom cell editor in Ng Grid

Postby pitc » Sat Dec 05, 2020 5:24 am

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
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: Custom cell editor in Ng Grid

Postby pitc » Wed Jan 06, 2021 4:05 pm

Has anyone got an example code snippet to share for custom cell editor?
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: Custom cell editor in Ng Grid

Postby swingman » Tue Feb 22, 2022 12:19 pm

Hi Tom, I have exactly the same problem.
Did you work out how to do it?
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: Custom cell editor in Ng Grid

Postby Gabi Boros » Tue Feb 22, 2022 4:40 pm

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.
Code: Select all
/**
* @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
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:"7F7BF511-4079-43BA-8020-8C5F08E2E9DA"}
*/
function onColumnFormEditStarted(foundsetindex, columnindex, value) {
   forms.commentEditor.comment = value;
}
Gabi Boros
Servoy
Gabi Boros
 
Posts: 399
Joined: Tue Jun 26, 2007 4:03 pm
Location: Timisoara, Romania

Re: Custom cell editor in Ng Grid

Postby pitc » Tue Feb 22, 2022 5:52 pm

@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:
Code: Select all
forms.commentEditor.comment = value;

and the saving back of the edited result:
Code: Select all
   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.
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: Custom cell editor in Ng Grid

Postby pitc » Tue Feb 22, 2022 7:00 pm

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 ''.
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: Custom cell editor in Ng Grid

Postby pitc » Thu Feb 24, 2022 12:36 am

In the developer there is a warning flagged on:
Code: Select all
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).
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: Custom cell editor in Ng Grid

Postby rafig » Mon Feb 28, 2022 4:41 pm

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.
Servoy Certified Developer
Image
rafig
 
Posts: 704
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK

Re: Custom cell editor in Ng Grid

Postby pitc » Tue Mar 01, 2022 12:55 am

AH yes, I did not realize that affected the checker!
Thanks!
Tom
prospect-saas.com
pitc
 
Posts: 115
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: Custom cell editor in Ng Grid

Postby rafig » Thu Mar 16, 2023 7:11 pm

@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
Code: Select all
   
   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
https://github.com/Servoy/aggridcomponents/wiki/Data-Grid
documents the Grouping Table Events as having params
Code: Select all
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
Servoy Certified Developer
Image
rafig
 
Posts: 704
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK

Re: Custom cell editor in Ng Grid

Postby paronne » Mon Mar 20, 2023 2:52 pm

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.

Code: Select all
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:

Code: Select all
/**
* @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
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Custom cell editor in Ng Grid

Postby rafig » Mon Mar 20, 2023 8:06 pm

paronne wrote: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
Servoy Certified Developer
Image
rafig
 
Posts: 704
Joined: Mon Dec 22, 2003 12:58 pm
Location: Watford, UK


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 5 guests

cron