CODEWITHSUNDEEP
jqueryasp.net-mvc-2jqgrid
Andrus
Andrus

Reputation: 27955

How to enable up/down arrow keys in jqgrid inline edit

How to implement excel like order detail edit grid.

This grid should be like excel:

  1. preferably up/down arrow keys move to previous / next row and start cell editing
  2. All cells are always in edit mode or edit mode starts if up / down arrow key is pressed or cell receives focus in any other way.
  3. tab moves to next cell in row
  4. Submit button sends all rows to ASP .NET mvc controller in server

Is it reasonable/how to implement this using jqGrid ? All jqGrid examples which I have found does not allow to use up down arrow keys to move next / previous row if in edit mode. If jqGrid is not reasonable, where to find other free component which can used to implement this ? Where to find sample code for this?

Update 1

I made question more presice and hopefully simpler:

How to enable up and down arrow keys in inline edit mode in jqgrid

How to force up arrow key to move previous row and down arrow key to next row in inline edit mode?

Desiread action may be:

  1. Current row should saved
  2. If save was successful and next/previous row exist, focus should moved to this row in same column
  3. Inline edit should started and current column shoudl be the same.

Link which Oleg provides shows moving to next/prev cell in same row in cell editing mode. How to move to next /previous row in inline edit. Even if soem of the steps below can implemented, it makes jqGrid more usable for fast data entry. I tried code below but it does not work since probably there ara no input elemement in other row. Solution would be to force jqgrid to show all cells in edit mode, then this code can be used. no idea is this reasonable/how to implement.

<script>
$(document).ready(function () {
    $("input.cell").keyup(function (e) {
        switch (e.keyCode) {
            // up arrow        
            case 40:
                $(this).parent()
                    .parent()
                    .next()
                    .children("td")
                    .children("input.cell[name="
                        + $(this).attr("name") + "]")
                    .focus();
                break;

            // down arrow        
            case 38:
                $(this).parent()
                    .parent()
                    .prev()
                    .children("td")
                    .children("input.cell[name="
                        + $(this).attr("name") + "]")
                    .focus();
                break;
        }
    });
});</script>

jqgrid edit and add rows with "tab" key provides sample of saving row on Tab key, should I try to sove it using this code or other idea?

Upvotes: 1

Views: 4850

Answers (1)

AnthonyAlmighty
AnthonyAlmighty

Reputation: 135

I have spent an entire day researching jqGrid for use in our software, and while the tool provides a lot of potential, what you're asking to accomplish seems to only be possible through intense customization. I hope someone responds and proves me wrong, but I think you and I are left to extend it ourselves to add this functionality.

Shame really, it would be incredibly valuable if it had this functionality out-of-the-box.

Upvotes: 1

Related Questions