save jqGrid Row to the server side collection with one line 'saveRow' method call?

Question

THE PROBLEM: Can I save a new jqGrid Row successfully added with 'addRowData' on jqGrid client side to the server side collection with one line 'saveRow' method call?

This is sort of a different version of a similar thread: How to perform action in jqGrid after adding new row

Although In my case it seems little different:

EXISTING: I have a grid that talks to .ashx handler for insert update delete and reading. (this works fine with inline editing etc.)

NEW FUNCTIONALITY: I have just added Paste Button that pastes an array of text and converts it to rows: long story short in the end two following lines of code finally add my split Data, row by row to my jqGrid:

var gridRow = { Id: rowId, Surname: rowSurname,  DateOfBirth: rowDateOfBirth, Salary: rowSalary, Postcode: rowPostcode };
            jQuery("#list").addRowData(rowId, gridRow);  //(**)

(as you see I KNOW my rowId, which I calculate searching through the existing data)

THE CATCH: Above code adds new row on UI only and I wanted it to get it added to Server collection as well.

FAULTY: After the line (**) I wanted to add it to server collection - simply using brand new call with saveRow passing URL. YET NOTHING HAPPENS

This is one variation of what I have already tried:

                                $("#list").jqGrid('saveRow', rowId, { //same rowId value used in 'addRowData' method above
                                    succesfunc: function (response) {
                                        return true;
                                    },
                                    url: "jqHandler.ashx",
                                    mtype: "POST",
                                    extraparam: gridRow // gridRow used in 'addRowData' method above
                                });

BOTTOM LINE: Can I save a new jqGrid Row successfully added with 'addRowData' on jqGrid client side to the server side collection with one line 'saveRow' method call?

I would really appreciate some guidance. Best Regards, Chris

chris chris · Accepted Answer · 2012-12-04T10:42:49

Sorted it out, may help someone, as it's simplistic:

All you need is to "Edit the row" so we just needed to add a Edit function call in the most simplistic way.

So the whole thing looks like this:

var gridRow = { Id: rowId, Surname: rowSurname,  DateOfBirth: rowDateOfBirth, Salary: rowSalary, Postcode: rowPostcode };
jQuery("#list").addRowData(rowId, gridRow);  

jQuery("#list").addRowData(rowId, gridRow);
jQuery("#list").jqGrid('editRow', rowId, { keys: true });

$("#list").jqGrid('saveRow', rowId, { //same rowId value used in 'addRowData' method above
                                    succesfunc: function (response) {
                                        return true;
                                    },
                                    url: "jqHandler.ashx",
                                    mtype: "POST",
                                    extraparam: gridRow // gridRow used in 'addRowData' method above
                                });

You may adjust so it uses same way of calling jQuery or jqGrid API. but it works...

Cheers

save jqGrid Row to the server side collection with one line 'saveRow' method call?

1 Answers