Custom cell editor in Ng Grid

[pitc]

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

[pitc]

Has anyone got an example code snippet to share for custom cell editor?

[swingman]

Hi Tom, I have exactly the same problem.
Did you work out how to do it?

[Gabi Boros]

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;
}


[pitc]

@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.

[pitc]

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 ''.

[pitc]

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).

[rafig]

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.

[pitc]

AH yes, I did not realize that affected the checker!
Thanks!