jqgrid : send edited data back to controller

Question

I am using ASP.Net MVC and placed a jqgrid on my page. The data source for my jqgrid is a xml file. I have populated a datatable from source xml and then converted this datatable into JSonObject to fill my jqgrid. I know it can be done in better ways but for now I have to apply it this way only..

In the jqgrid, I have enabled editmode for each column so that user can click on a row and edit the data there itself. Now, I need to save this data back by sending it to some controller method like SaveData() which will then save it back to xml using DOM objects. Can anyone please tell me how to send this data? using which events? Do I really need to use clientArray here?

Here is my code ...

var lastSel;
$("#list1").jqGrid({
url: '/CMS/GetCustomerData/5001',
datatype: 'json',
mtype: 'GET',
height: '150',
rownumbers: true,
colNames: ['id', 'name', 'company'],
colModel: [
            { name: 'id', index: 'id', editable: false, sortable: true, width: 20, align: 'left' },
        { name: 'name', index: 'name', editable: true, edittype: 'text', sortable: true, search: true, width: 50, align: 'left' },
        { name: 'company', index: 'company', editable: true, edittype: 'text', sortable: true, search: true, width: 50, align: 'left' }],
            pager: jQuery('#pager'),
            viewrecords: false,
            imgpath: '/Content/Default/UIComponents/css/redmond/images',
            caption: "Customer details",
            width: 900,
            hidegrid: false,
            multiselect: false,
            altRows: true,
            altclass: 'altRow',
            onSelectRow: function(id) {
                if (id && id !== lastSel) {
                    jQuery("#list1").saveRow(lastSel, true, 'clientArray');
                    jQuery("#list1").editRow(id, true);
                    lastSel = id;
                }
            }
        });
    });