jQuery Grid Plugin - jqGrid

tony said:

Hello,

What do you use inline edit, cell edit or form edit?

If you use cell editing you can use clientArray in the url and then getChangedCells method.

Regasrds

Tony

---

Thanks Tony,

I am using cell edit. I am very new to jquery and jqgrid. Can you please give a suitable example with some code to implement it in asp.net mvc or any other better. Following is my view code(Index.aspx)

        jQuery(document).ready(function() {

            jQuery("#list").jqGrid({

                url: '/Home/GetGridData/',

                datatype: 'json',

                mtype: 'POST',

                colNames: ['Customer ID', 'Contact Name', 'Address', 'City', 'Postal Code'],

                colModel: [

                  { name: 'CustomerID', index: 'CustomerID', width: 100, align: 'left', editable: true },

                  { name: 'ContactName', index: 'ContactName', width: 150, align: 'left', editable: true },

                  { name: 'Address', index: 'Address', width: 300, align: 'left', editable: true },

                  { name: 'City', index: 'City', width: 150, align: 'left', editable: true },

                  { name: 'PostalCode', index: 'PostalCode', width: 100, align: 'left', editable: true }

                ],

                rowNum: 10,

                rowList: [10, 20, 30],

                imgpath: '/scripts/themes/sand/images',

                pager: jQuery('#pager'),

                sortname: 'CustomerID',

                viewrecords: true,

                sortorder: "desc",

                caption: "Cell Edit Example",

                forceFit: true,

                cellEdit: true,

                cellsubmit: 'clientArray',

                editurl: "/Home/GridSave",

                afterEditCell: function(id, name, val, iRow, iCol) {

                    if (name == 'invdate') {

                        jQuery("#" + iRow + "_invdate", "#celltbl").datepicker({ dateFormat: "yy-mm-dd" });

                    }

                },

                ondblclickrow: function(id) { 

                  if (id) { 

                   var grid = jquery('#grid'); 

                    if(id !== lastsel) {

                      jquery('#list').restorerow(lastsel) 

                        jquery('#list').editrow(id, true); 

                     lastsel = id; 

                    } 

                   else { 

                      jquery('#list').saverow(lastsel); 

                      lastsel = -1; 

                    } 

                 }

                }, 

                afterSaveCell: function(rowid, name, val, iRow, iCol) {                   

                    if (name == 'amount') {

                        var taxval = jQuery("#celltbl").getCell(rowid, iCol + 1);

                        jQuery("#celltbl").setRowData(rowid, { total: parseFloat(val) + parseFloat(taxval) });

                    }

                    if (name == 'tax') {

                        var amtval = jQuery("#celltbl").getCell(rowid, iCol - 1);

                        jQuery("#celltbl").setRowData(rowid, { total: parseFloat(val) + parseFloat(amtval) });

                    }

                }

            })           

            .navGrid(pager, { edit: true, add: false, del: true, search: true }, {}, {}, { url: "/Home/Delete" });

        });

Following is my Controller code.

namespace MvcApplication1.Controllers {

    [HandleError]

    public class HomeController : Controller {

        public ActionResult Index() {

            ViewData["Message"] = “Welcome to ASP.NET MVC!”;

            return View();

        }

        public ActionResult About() {

            return View();

        }

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult GetGridData(string sidx, string sord, int page, int rows) {

            return Content(JsonHelper.JsonForJqgrid(GetDataTable(sidx,sord,page,rows), rows, GetTotalCount(), page), “application/json”);

        }

        public DataTable GetDataTable(string sidx, string sord, int page, int pageSize) {

            int startIndex = (page-1) * pageSize;

            int endIndex = page * pageSize;

            string sql = @”WITH PAGED_CUSTOMERS  AS

                        (

                       SELECT CustomerID, ContactName, Address, City, PostalCode,

                       ROW_NUMBER() OVER (ORDER BY ” + sidx + @” ” + sord + @”) AS RowNumber

                       FROM CUSTOMERS

                        )

                        SELECT CustomerID, ContactName, Address, City, PostalCode

                        FROM PAGED_CUSTOMERS

                        WHERE RowNumber BETWEEN ” + startIndex + @” AND ” + endIndex + @”;”;

            DataTable dt = new DataTable();

            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["mainConnection"].ConnectionString);

            SqlDataAdapter adap = new SqlDataAdapter(sql,conn);

            var rows=adap.Fill(dt);

            return dt;

        }

        public int GetTotalCount() {

            string sql = @”SELECT COUNT(*) FROM Customers”;

            SqlConnection conn=null;

            try {

                 conn= new SqlConnection(ConfigurationManager.ConnectionStrings["mainConnection"].ConnectionString);

                SqlCommand comm = new SqlCommand(sql, conn);

                conn.Open();

                return (int)comm.ExecuteScalar();

            } catch {

            } finally {

                try {

                    if (ConnectionState.Closed != conn.State) {

                        conn.Close();

                    }

                }catch {

                }

            }

            return -1;

        }

    }

}

Regards 

Hari