Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET MVC jQuery
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;
                }
            }
        });
    });
Posted 27-Oct-10 2:58am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

hi...
 
im givin you one example..hope this may help you..
 

in the view yuo shud write like this
 
$(document).ready(function () {
var updateDialog = {
url: '/Home/Update/'
, closeAfterAdd: true
, closeAfterEdit: true
, afterclickPgButtons: function (whichbutton, formid, rowid) {

}
, modal: true
 
, onclickSubmit: function (params) {
var ajaxData = {};
 
var list = $("#list");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
ajaxData = { intFerryId: rowData.intFerryId };

return ajaxData;
}
 
, width: "400"
};
$.jgrid.nav.addtext = "Add";
$.jgrid.nav.edittext = "Edit";
$.jgrid.nav.deltext = "Delete";
$.jgrid.edit.addCaption = "Add Ferry";
$.jgrid.edit.editCaption = "Edit Ferry";
$.jgrid.del.caption = "Delete Ferry";
$.jgrid.del.msg = "Delete selected Ferry?";
 
jQuery("#list").jqGrid({
url: '/Home/JsonSalesCollection/',
datatype: "json",
mtype: 'GET',
colNames: ['FerryId', 'FerryName', 'FerryDuration'],
colModel: [
{ name: 'intFerryId', index: 'intFerryId', width: 50, align: 'left' },
{ name: 'strFerryName', index: 'strFerryName', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'tmFerryDuration', index: 'tmFerryDuration', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'}}],
rowNum: 10,
rowList: [10, 20, 30],
imgpath: gridimgpath,
height: 'auto',
width: '300',
pager: jQuery('#pager'),
sortname: 'intFerryId',
viewrecords: true,
sortorder: "desc",
caption: "Ferry Details", autowidth: true,
ondblClickRow: function (rowid, iRow, iCol, e) {
$("#list").editGridRow(rowid, prmGridDialog);
}
 
}).navGrid('#pager',
{
edit: true, add: true, del: true, search: false, refresh: true
}, updateDialog,
updateDialog,
updateDialog
);
});
 

in the controller code is like this
you shud create an object of FormCollection in your controller.If u hav any doubt just ask to me...
the controller code is given below
 

public ActionResult Update( FormCollection formCollection)
{
ferry obj=new ferry();
var operation = formCollection["oper"];
if (operation.Equals("add") )
{
obj.FerryDuration = formCollection.Get("tmFerryDuration").ToString();

obj.FerryName = formCollection.Get("strFerryName").ToString();
obj.SaveOrUpdate();

 

}
else if(operation.Equals("edit"))
{
obj.FerryDuration = formCollection.Get("tmFerryDuration").ToString();
obj.FerryId = int.Parse(formCollection.Get("intFerryId").ToString());
obj.FerryName = formCollection.Get("strFerryName").ToString();
obj.SaveOrUpdate();
}
else if (operation.Equals("del"))
{
 
obj.FerryId = int.Parse(formCollection.Get("intFerryId").ToString());
obj.Delete();

}
 
return Content(obj.HasErrors.ToString().ToLower());
}
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

In addition to the url parameter you will need to include a editurl parameter that handles both inserts and updates.
 
$('#list1').jqGrid({
  url: '/CMS/GetCustomerData/5001',
  editurl: '/CMS/EditCustomerData/',
  datatype: 'json'
  ...
 
This will cause jqGrid to send the row being added/updated in the GET/POST params as well as an additional parameter that specifies the action.
 
Hope this helps
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

U should read the row (data) from Jquery Grid using jquery and make it as an object(like xml or array or josn ...) and send it back to server .
 
use the above statement when clicking on save button
  Permalink  
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Mathew Soji 334
1 Maciej Los 295
2 BillWoodruff 290
3 Afzaal Ahmad Zeeshan 257
4 DamithSL 225
0 OriginalGriff 6,369
1 Sergey Alexandrovich Kryukov 5,973
2 DamithSL 5,183
3 Manas Bhardwaj 4,673
4 Maciej Los 4,045


Advertise | Privacy | Mobile
Web01 | 2.8.1411019.1 | Last Updated 8 Dec 2010
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100