I’m trying to implement a jqGrid with MVC.
The Model is:
public class InvoiceHeader
{
public int id { get; set; }
public DateTime invdate { get; set; }
public int clientid { get; set; }
public decimal amount { get; set; }
[Display(Name = "Invoice Number:")]
public int tax { get; set; }
public decimal total { get; set; }
[Required(ErrorMessage = "Note is a required field.")]
[Display(Name = "Note:")]
public string note { get; set; }
public int PaymentTypeId { get; set; }
public string CreatedByUsername { get; set; }
public virtual PaymentType PaymentType { get; set; }
}
My View is:
@model JQGRID.Models.InvoiceHeader
@{
ViewBag.Title = "Home Page";
}
@*<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />*@ <title>My First
Grid</title>@*<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />*@
<link rel="stylesheet" type="text/css" media="screen" href="../../Scripts/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Scripts/css/ui.multiselect.css" />
@*<link rel="stylesheet" type="text/css" media="screen" href="../../Content/themes/ui-lightness/jquery-ui-1.8.14.custom.css" />*@
<style>
html, body
{
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="../../Scripts/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/js/jquery.jqGrid.min.js" type="text/javascript"></script>
@*<script src="../../Scripts/src/grid.inlinedit.js" type="text/javascript"></script>*@
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'POST',
colNames: ['id', 'note', 'tax', 'PaymentType', 'CreatedByUsername', 'Actions'],
colModel: [
{ name: 'id', index: 'id', hidden: true, editable: false },
{ name: 'note', index: 'note', width: 40,align:'center', editable: true, editrules: { required : true } },
{ name: 'tax', index: 'tax', width: 400, align: 'center', editable: true, editrules: { required : true } },
{ name: 'PaymentTypeId', index: 'PaymentTypeId', width: 400, align: 'center', editable: true, edittype:"select",
editoptions: { dataUrl: '/Home/PaymentTypes/' }},
{ name: 'CreatedByUsername', index: 'CreatedByUsername', hidden: true, editable: false },
{ name: 'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
formatoptions:{
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
beforeSubmit:function(postdata, formid) {
alert("Hi");
jQuery("#ValidationSummary").show('slow');
},
},}
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '',
caption: 'My first grid',
editurl: '/Home/Save/'
});
jQuery("#list").navGrid('#pager', { edit: false, search: false, add: true });
});
</script>
@using (Html.BeginForm()) {
@Html.ValidationSummary()
<table id="list">
</table>
<div id="pager">
</div>}
As you can see on Save the following method in the controller is called:
public void Save(InvoiceHeader invoiceHeader)
{
if (ModelState.IsValid) {
...
try {
context.SaveChanges();
}
catch (Exception ex) {
}
}
}
What I don’t understand is why when you enter this method and check invoiceHeader properties the id property is populated but the CreatedByUsername property is not populated.
I really need this property populated to save.
Could someone please explain to me why this is and how I can get CreatedByUsername populated?
Did you check the values of the Id object in your Save action? They should be the row id in the grid, not the actual Id of the object you’re editing.
To prevent this, you should try adding columns for the
Idand theCreatedByUserNamecolumns and make them invisible. Also, add akey:truevalue to your Id column. That way, while editing, the values will get populated from those columns.