how to send data to controller from jqgrid

Question

0.00/5 (No votes)

See more:

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 1:58am

A M SOMAN

Add a Solution

3 solutions

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());
}

Posted 7-Dec-10 23:01pm

Blesson Mathew

Updated 7-Dec-10 23:04pm

v2

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

Posted 27-Oct-10 4:08am

RECSEN

Updated 27-Oct-10 4:09am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Jules VDV · Accepted Answer · 2010-10-27T04:50:00

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