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: 1406
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: 387
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: 635
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


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 1 guest