Grid cell navigation for edits

[Adam Gruszynski]

I have a grid using a dataview and cell navigation.  I have a requirement that when a user completes an edit in a cell then hits enter, they move to the next cell with an error. 

I have it working with one small glitch.  When the grid.onKeyDown is invoked and it is an enter, the grid.onCellChange is invoked to commit the change in the onKeyDown event (commitEditAndSetFocus).  In the onCellChange, I search for the next item in error status.  It finds the next cell correctly, sets the grid.setActiveCell(i, j); and grid.focus(); and the onCellChange completes.  The next part of commitEditAndSetFocus, the option, autoEdit is evaluated and then the navigateDown() fires effectively negating my setActiveCell.  I need the autoEdit on... is there another place for me to do setActiveCell?

Thanks,
Adam

[Adam Gruszynski]

Just to clarify, "move to the next cell with an error" means the next cell in any row whose meta data specifies that the cell has an error.

[Michael Leibman]

Try executing your logic AFTER the grid has finished its internal processing by putting it in a setTimeout(<your fn>, 0).

--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Steve Fazekas]

Adam

I would love to get that logic from you when you're done making it work...

 I would have a need for that when adding rows with required cells...

Steve

Sent from my iPhone

[Adam Gruszynski]

Tin, thank you.  That did the trick.  I understand the setTimeout, however not sure how its allowing the execution of the events to finish first.  Is it that they complete so quickly that even a timeout of 0 is enough of a delay to let the events propagate and complete before my code?

[Adam Gruszynski]

Steve, will do.  Will be a couple days though.

[Michael Leibman]

No, all JavaScript code execution is single-threaded.  Putting your logic in setTimeout() lets your code run after the currently running code has finished instead of running immediately.

[Eileen McNaughton]

I have kind of the same need  but simpler - I have an editor which is based on LongText editor. On normal fields after you finish data entry you tab & move to the right. However, both my editor & the LongText editor have a 'save button'. If you click on this you move down instead of to the right. This is confusing in the grid I have but it seems like I can't 'just' change it? This seems like it should be simple?

Perhaps I need to turn auto-edit off & on? On do I need to set a timer just for this?

Eileen

[Eileen McNaughton]

Changing the 'save' function on my editor 'seems' to make it work

        this.save = function (event) {
          saveContactForm();
          args.grid.setOptions({autoEdit:false});
          args.commitChanges();
          args.grid.setOptions({autoEdit:true});
          args.grid.navigateNext();
          args.grid.makeActiveCellEditable();
        };

But, I'm not sure if I risk losing any of the grid locking by doing this.

On Thursday, August 1, 2013 7:37:37 AM UTC+12, Adam Gruszynski wrote:

[Eileen McNaughton]

[Michael Leibman]

Using .setOption() to trigger autoEdit isn't a good idea.

I actually wouldn't call the behavior you have a problem...  It makes sense to me.  On default "accept edit" action (i.e. Enter), we navigate down.  On "accept edit & next" (i.e. TAB), we navigate to next.  A "Save" button is clearly the default "accept edit", so it's expected that it'd navigate down, as opposed to hitting TAB in the editor, which still works.

Now, it's a good question of how you can change the Save button to navigate next instead, and I don't have a good answer right now other than changing the editor's save() implementation to store the active cell coords before committing the changes, then navigate back to that cell and call grid.navigateNext() after the edit.

[Eileen McNaughton]

Thanks for the super-prompt reply. The context is that I am l am looking at using slickgrid for data entry - as an extension for CiviCRM.

In the particular context the person is generally tabbing around the cells & entering stuff - however, when they are entering a cheque they need to find or add a contact record. I have created a pop up form where they can select or create the contact. But then once they click save they then should move across the row to the next field to enter. So, from a work-flow this is a problem.

However, I think I have another problem & the answer to that may make this one obsolete. I have the contact being created by an ajax call when they click save & it is not until that ajax call returns that the value for the cell (the contact id) is known. So, I guess my understanding of the flow there is not quite adequate yet. As the contact id is generally the first row in the table it co-incides with adding a new row. But, I'm not clear on the order of things & what I can rely on. I have switched to using a dataview rather than a direct table (I was hoping to be able to delete rows too - but it seems I can't? - maybe I could just set them to store a deleted value & somehow hide them.).

FWIW here is what I have been working on - although there has been a fairly steep learning curve here & I will need to re-visit a lot of the code.


https://github.com/eileenmcnaughton/nz.co.fuzion.slickgrid

[Eileen McNaughton]

I think I'm starting to make sense of it.... My notes on how the objects fit together are here. I'm afraid I'm fairly new to a lot of this so it may not be entirely right

http://pastebin.com/0PYnnKg4