Edit Multiple rows in Struts2 jQuery Grid via Inli

Question

   The struts2-jQuery grid offers a wide variety of edit features. But for one of our requirements, the Out-of-the-Box 'Edit' feature in this grid is not suitable. we want to customize it as follows..

Our Requirements are:

1. User should be able to edit more than 1 row at a time - According to the default out-of-the-box implementation, after every row edit, user has to perform a save operation (by hitting Enter or clicking Save button) before proceeding to edit the next row
2. Move between rows using TAB for editing

3. A 'Bulk/Batch Save' operation which could send all the edited rows data to my action and from there we can do a Bulk Save database operation

   Our approach:

Customization 1: Bring the 'Edit / Cancel' buttons on the first column on all rows (No save buttons on each row). On click of Edit, the particular row becomes editable
Customization 4: Bring a new 'Batch Save' image button in the Grid tool bar
Customization 5: On click on 'Batch Save', collect all the edited row data (along with id) and receive it in Action as arrays to perform 'Batch Update' database operation

We got our inspiration from the 'Custom Edit' posted @ www.trirand.com/blog/jqgrid/jqgrid.html

** Has anybody come across similar requirements or have done similar customizations to the Struts2-jQuery Grid ?**

I am surprised that the grid does not offer this 'Multi Row Edit' by default.

**

Update 1:

**

In the process of implementing a custom 'Bulk/Batch Save' feature on the grid, we got few more problems.. wanted to share them with you all .. while we are working to get them fixed.. appreciate if anybody could throw pointers on them..

1. We want to Refresh the grid after data is saved via our custom 'Save All' grid tool bar button. On click of this button we are making an Ajax post request to the action that will perform the save all modified data.

2. When navigating away after Edit (without save), show alert to save the modified data

3. Prevent page posting to the Action class when user hits 'Enter' while editing a column

4. Adding custom checkbox and use those values for custom Delete operation (because the checkbox generated via the Multiselect option is causing issues in multi-edit)

5. Edit rules feature in S2J Grid to call custom javascript validation

**

Update 2:

**

We couldn't identify the bindKeys as mentioned in one of the answers below, meanwhile here is our approach. There are still many open ends to this implementation , which we are still working it out.

Step 1: Use the following in the grid to create our custom 'Edit' & 'Cancel' buttons for each row of data onGridCompleteTopics="createbuttons" , here createbuttons was our custom written jScript function.

 $.subscribe('createbuttons',function(event,data)
             {

                    var ids = jQuery("#gridtable").jqGrid('getDataIDs');
                for(var i=0;i < ids.length;i++)
                {
                    var cc = ids[i];
                    var rowData = jQuery('#gridtable').jqGrid('getCell',cc,'name');

                    edit = "<input  type='image' class='ui-icon ui-icon-pencil' onblur='check()'  style='display:inline;'  onclick=\"javascript:editCurrentRow('"+cc +"');\" />";
                    cncl = "<input  type='image' class='ui-icon ui-icon-cancel' style='display:inline;'    onclick=\"javascript:removeCurrentRow('"+ cc +"');\" />";


                    jQuery("#gridtable").jqGrid('setRowData',ids[i],{Buttons:edit+cncl});

                }

                });

Step 2: Added a custom button to the grid, this will be a custom written javascript function which will collect all editted row's data and make an Ajax post to our Struts2 Action class. From there we create an array of this input to pass it on to Oracle procedure and perform the DB operation (Insert/Update) within the procedure (using FORALL INSERT/UPDATE)

navigatorExtraButtons="{                                
                                saveall:{
                                      title:'Save Alls',                                      
                                      onclick:function(){call_function_save()}
                                      }
                                  }"

Step 3: We added the following code to all textbox cells to prevent page posting when hit on Enter

<sjg:gridColumn name="name" index="name" 
            title="Name" formatter="String" editable="true" editoptions="{ dataEvents: [
        { 
            type: 'keydown', 
            fn: function(e) { 
                var key = e.charCode || e.keyCode;
                if (key == 13)//enter
                {
                    return false;
                }
            }
        } 
    ]}"
           edittype="text" />

I will keep everyone posted about our progress, but there is a new challenge which we are facing now, for which i have posted another question here and here

Answer 1

I think you need to look at inline editing here and implement bindKeys which you can find here. Let me know if u have issues implementing it.

bindKeys

Parameters:

{ 
  onEnter: null, 
  onSpace: null, 
  onLeftKey: null, onRightKey: null, 
  scrollingRows : true 
}

Answer 2

Hi friends I got the solution for the above problem using inline edit. Batch save:

Batch save is possible with java script. using java script we read all grid values then it is send over the network to our action class

Thank you,

If any help on coding i will sent to you.