Edit form on JQGrid and ASP.NET MVC 2 - asp.net-mvc-2

Question

I am having an issue on JQgrid when I select a row and press edit button. The problem is that I want a modal edit-form and it apears at the top of the page, but when I click on it, it close.
I review the JQgrid docs and search for examples but I can't make it work. I am using ASP.NET MVC 2 and JQgrid 1.4.1 and I attached the files JqDnr and Jqmodal.
<script type="text/javascript">
var lastsel;
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Nombre', 'Sponsor', 'Fecha de Evaluacion', 'Fecha Prevista de Fin', 'Planta', 'Sector', 'LOTO?', 'Trabajo en Altura?', 'Espacio Confinado?', 'Caliente?', 'Amianto?', 'Observaciones'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, align: 'left', editable: false },
{ name: 'Nombre', index: 'Nombre', width: 200, align: 'left', editable: true },
{ name: 'Sponsor', index: 'Sponsor', width: 80, align: 'left', editable: true, edittype: "select", editoptions: { size: 71} },
{ name: 'Fecha de Evaluacion', index: 'FechaEvaluacion', width: 90, align: 'left', editable: true },
{ name: 'Fecha Prevista de Fin', index: 'FechaPrevistaFin', width: 90, align: 'left', editable: true },
{ name: 'Planta', index: 'Planta', width: 70, align: 'left', editable: true },
{ name: 'Sector', index: 'Sector', width: 70, align: 'left', editable: true },
{ name: 'LOTO?', index: 'PermisoLOTO', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Trabajo en Altura?', index: 'PermisoTrabajoAltura', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Espacio Confinado?', index: 'PermisoEspacioConfinado', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Caliente?', index: 'PermisoCaliente', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Amianto?', index: 'PermisoAmianto', width: 50, align: 'left', editable: true, formatter: "checkbox" },
{ name: 'Observaciones', index: 'Observaciones', width: 200, align: 'left', editable: true}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/sand/images',
caption: 'Tareas'
}).navGrid("#pager", { edit: true });
});
</script>
Tareas
So, any help will be very helpfull. Thanks!

Answer 1

I can not reproduce your probelm (see the test here), but I can definitively say you that you have to change the values from the name property from the colModel. The name property will be used as the property name. It build additionally the ids of different elements in the Edit form. The id ementens like
id="Fecha Prevista de Fin"
id="tr_Fecha Prevista de Fin"
id="Amianto?"
id="tr_Amianto?"
and so on are bad. You can use Developer Tools of IE for example (press F12 in IE) to examine the ids used in the Edit form of your current code. I strictly recommend you to use in the name property only characters from the set [a-zA-Z0-9] and start the name with a letter. No blanks inside of the name is permitted (see here and here).
By the way the parameter imgpath is deprecated since many jqGrid releases and you should remove it.