Custom Column Editor Help

[qfinsoft]

I'm currently trying to implement a custom editor for a few columns in my grid (the grid is using inline editing of remote data).  The columns in question hold array or object values.  I've been playing with Treema (http://codecombat.github.io/treema/), and I believe I am most of the way there to having it working nicely within the grid as a custom editor of json objects or arrays.   

Anyhow, with those details in mind, I need to modify a column's custom editor's return value to rowData.  A couple of issues I need help with resolving to get it 100% of the way there:

1)  When using a column editor's getData property (defined as a function), its return value gets put into the 'root' of rowData.  In the case of an object, returning something like

Code: [Select]

{ foo1: foo1val, foo2: foo2val } from getData ends up creating rowData.foo1 and rowData.foo2.  However, I'd like to actually have an object (for instance 'foos') with two properties (i.e. foo1 and foo2) end up in the root of rowData instead.  Is there a way to return an object to rowData that will allow this to happen?

2)  When implementing a column editor's getData function for more than one column in the grid, it appears that only the getData function of the last column that was edited actually gets fired when clicking the row's 'Update' button.  Shouldn't every column's editor.getData fire when a row's update is called?  (if such a function is defined for that column)  Or perhaps I'm not understanding how a column editor's getData is designed to function?  In actuality, I'd prefer to modify rowData values much earlier than getData currently fires.  It currently fires when the row's Update button is clicked, but would rather have this happen when finished column editing, such as during the editorEnd event.  However, I'm having difficulty accessing the column's old values AND new values in the editorEnd event.  The changes aren't returned via getChanges, and I'm not seeing them in the function's ui object either.   

3)  Number 2 could potentially be related to this, but at least initially seems to be a separate issue.  Upon editing a column's value using a custom editor, the cell's 'pq-cell-dirty' is not applied.  Is there a best practice for doing this for custom editors?  Should this be done in the editorEnd or cellBeforeSave method (for instance)?  In any case, I would need to be able to check the cell's previous value against its newVal to ensure it has in fact changed before making it dirty.  The first challenge at the moment is to ensure that ui.newVal is populated when cellBeforeSave event fires on a column with a custom editor.  Currently, it is undefined.

Please help!  I'm so close, yet so far.   



 

[paramvir]

pqGrid doesn't support nested JSON data directly.

As a simple workaround JSON data meant for cell could be serialized by JSON.stringify() and returned as string in getData implementation.

And where ever the original JSON data is required, string can be deserialized back with JSON.parse().

getData is called if it's implemented and whenever the cell is saved, cell is saved when enter or tab key is pressed or the cell loses focus.

Please refer this demo http://paramquery.com/pro/demos/editing_custom for custom editors and if you face any kind of issue, please share a jsfiddle.

[qfinsoft]

I was able to get in-line editing of JSON objects and arrays working nicely using Treema, by using the following approach for in-line editing of remote data (row based editing):

1) Display the treema-ized version of the cell data using the colModel's render function to build the treema object for that cell, but making the column editable = false so the user can't modify the data using Treema editor within the cell itself  (in-cell editing using Treema editor was very problematic to implement fully).  Also, during the render function, hide the '.treema-add-child' element and append a custom 'edit x' button to the treema object in the cell (but make it hidden as well).

2) When the user clicks the row's edit button, unhide the 'edit x' buttons that were created within the various column render functions.

3) When the user clicks on the 'edit x' button in a particular 'treema-ized' cell, run a function that dynamically creates a modal popup dialog, (re)building the treema object editor for that particular cell as you had done in the render function using the treema.build() method. 

4)  When the user accepts the popup dialog, save the values from the treema editor instance to the grid's dataModel's data as required, and set the cells to dirty (i.e. adding class 'pq-cell-dirty'), and then finally refreshView.

5)  On the row's update button click event, check validity of the row, but don't check for grid.isDirty (you shouldn't need to anyhow).  I wasn't able to figure out how to tell the grid that it is now dirty, but if you can, you may also check for it.  If you do, please let me know the way to set isDirty.