jqGrid - edit data

Question

I am quite new to jquery and jqgrid. I use ASP.NET WebForms. I am able to get some data prom server and show it in grid. I use PageMethods to get data from server. Usually my code is

function CreateGrid(){
    $("#sestGrid").jqGrid({
        datatype: GetData,
        //toolbar: [true, "top"],
        colNames: ['Name', 'Age'],
        colModel: [
            { name: 'Name', index: 'Name', width: 170, align: 'left',
              sortable: false, key: true },
            { name: 'Age', index: 'Age', width: 40, align: 'center',
              sortable: false, editable: true },
        ],
        ondblClickRow: function () {
            var row_id = $("#sestGrid").getGridParam('selrow');
            $('#sestGrid').editRow(row_id, true);
        }
    });
}

function GetData() {
    PageMethods.GetSestevalniStevecData(GotData);
}

function GotData (data) {
    $("#sestGrid").clearGridData(false);
    for (var j = 0; j <= data.length; j++)
        $("#sestGrid").jqGrid('addRowData', j + 1, data[j]);
}

So, now I would like to edit some data and post it to server. How can I do that using PageMethods? Should I use any other approach?

And one more thing. I checked the demos http://trirand.com/blog/jqgrid/jqgrid.html and in all edit examples you are able to edit only one row and then you have to save changes… Is it possible to edit more than one row and save all changes in one step?

Thanks all.

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

jqGrid is designed to be used together with ajax services. So if the user change the data of some row then the changes will be send to the server: to the URL which you configure through jqGrid parameter editurl. So the easiest way to implement row editing will be to include an ASMX web-service or a WCF service in you web site. It is not important whether you use ASP.NET WebForms, ASP.NET MVC or just pure HTML for your pages. So just choose the technology which you prefer and add the corresponding page to your site.

The ASMX or WCF should has a method with the signature like

public string MyDataEdit (string Age, string oper, string id)

(see this old answer for more information). The method should return the id of the new added item (the Name in your case) in case of Add operation.

One more small remark. You can change the definition of the ondblClickRow function from function() to function(row_id) and remove the line used getGridParam('selrow').

edited May 23 '17 at 12:29

Community

1
1

answered Nov 26 '10 at 21:12

Oleg

220,925
34
403
798

Oleg, thank you for your response! Your post helped me to improve my jqgrid knowledge. So, if I get you right every row is posted to server after it was edited. Is it possible to edit few rows and post all of them to server by one click on a button? – user521379 Nov 27 '10 at 20:04
@user521379: To be more exact jqGrid support three main types of editing: form editing, inline editing and cell editing. inline editing and cell editing support **local** editing. So the data can be edited in jqGrid locally. Only form editing support deleting and inserting rows. You can for example implement local inline editing and post the modified rows at once. The problem is that in the case the posting of many modified rows you have to implement yourself manually. Moreover in case of multiuser environment it is much more complex to implement error handling. I'll recommend to post one row. – Oleg Nov 27 '10 at 20:20
Is there any easier option to get changed data from grid? Now I save it in custom array, which is so primitive and not so reliable solution. Does grid have any method like GetChangedRows()?? Is there any better solution of storing changed rows then mine? Thank you! – user521379 Nov 29 '10 at 17:20
@user521379: No. jqGrid has only the data of the current row which are editing. So if you **really need** to implement editing on multiple rows in once you have to to many things manually. The tracing of all modified rows you can do yourself inside of the `ondblClickRow` handler, but it is only the starting point of your problems. So implement this if it is **really required**. – Oleg Nov 29 '10 at 18:17
Ok. Usually grid supports batch editing. If user needs fast editing of data I cannot afford to reload grid data after editing of every row. In some cases I have to load 200 or 300 rows. I am quite surprised that this plugin does not support this feature… or am I missing something? What If user decides to cancel editing?? I am a little bit lost!! Oleg thank you for your respons!!! Do you have any Idea? – user521379 Nov 29 '10 at 22:25
@user521379: Why do you speak about reloading of the grid? You use At the end of the row editing the user can click "Enter" to save the editing row or press "Esc" to cancel the editing. In case of server based data, the `editRow` post the modified row data to the server and the server can verify the data and save it in the database or the server can answer with the error which will displayed to the user. No data reloading well be done. In case of form editing per default the grid will be reloaded, but with `reloadAfterSubmit:true` you can change it. – Oleg Nov 29 '10 at 22:38
@user521379: If you do has the data reloading then is can be only because of your other code in ASP.NET WebForms which you not posted. Just try to modify your page to pure HTML page and you will see what I mean. – Oleg Nov 29 '10 at 22:39
Finnaly I changed behaviour of my grid as you suggested.Thank you Oleg. – user521379 Nov 30 '10 at 11:50

score 0 · Answer 2 · answered Jul 19 '11 at 10:01

I used your example and changed it a bit:

ondblClickRow: function (rowid) {
if (rowid && rowid != lastsel) {
    changedRows.push(rowid); //keep row id
    jQuery('#jqgrid').editRow(rowid, true);
}
}

Under the save button click event:

$.each(changedRows, function () {
    var row = $("#jqgrid").getRowData(this);
    var Id = row['ID'];
    var price = $(row['Price']).val(); //this is an input type
});

HTH someone :)

jqGrid - edit data

2 Answers2