Question

I am having an issue working with jaGrid and ASP.NET MVC 2. Everything is working, but when I select a row I get this error on FireBug: uncaught exception: jqGrid – No such method: restoreRow.
Debugin Js I realize that error happend here:

onSelectRow: function(id) {
    if (id && id !== lastsel) {
        jQuery('#list').jqGrid('restoreRow', lastsel);
        jQuery('#list').jqGrid('editRow', id, true);
        lastsel = id;
    }

I think, the problem is the jqGrid libraries include (or the include order). This is my Index.aspx page.

<%--CSS Files--%>
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />

<%--jQuery Library--%>
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.min.js"></script>

<%--Must load language tag BEFORE script tag--%>
<script type="text/javascript" src="../../Scripts/grid.locale-es.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../../Scripts/grid.jqueryui.js"></script>
<script type="text/javascript" src="../../Scripts/grid.base.js"></script>
<script type="text/javascript" src="../../Scripts/grid.common.js"></script>
<script type="text/javascript" src="../../Scripts/grid.formedit.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.fmatter.js"></script>
<script type="text/javascript" src="../../Scripts/grid.custom.js"></script>
<script type="text/javascript" src="../../Scripts/jqDnR.js"></script>
<script type="text/javascript" src="../../Scripts/jqModal.js"></script>
<script type="text/javascript" src="../../Scripts/grid.import.js"></script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<table id="tableAccidentes" border=0>
    <tr>
        <td><img alt="" src="../../images/icono_victima.png" /></td>
        <td><h2>Accidentes Registrados</h2></td>
    </tr>
</table>
<script type="text/javascript">
    var lastsel;
    var Plantas = ['Pablo Podesta', 'Pilar', 'Tigre', 'Otra'];

    jQuery(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/Accidentes/ListarAccidentes',
            datatype: "json",
            colNames: ['Fecha', 'Detalle', 'Accidentado', 'Planta'],
            colModel: [
                { name:'Fecha', index:'Fecha', width:150, align:'left',
                  editable:true },
                { name:'Detalle', index:'Detalle', width:150, align:'left',
                  editable:true },
                { name:'Accidentado', index:'Accidentado', width:200,
                  align:'left', editable:true },
                { name:'planta', index:'planta', width:150, align:'left',
                  editable:true, edittype:"select",
                  editoptions: { value:Plantas} }
           ],
            onSelectRow: function(id) {
                if (id && id !== lastsel) {
                    jQuery('#list').jqGrid('restoreRow', lastsel);
                    jQuery('#list').jqGrid('editRow', id, true);
                    lastsel = id;
                }
            },
            editurl: "/Accidentes/GridSave",
            edit: {
                addCaption: "Agregar Accidente",
                editCaption: "Editar Accidente",
                bSubmit: "Guardar",
                bCancel: "Cancelar",
                bClose: "Cerrar",
                saveData: "Se modifico el registro! ¿guardar los cambios?",
                bYes: "Si",
                bNo: "No",
                bExit: "Cancelar"
            },
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/scripts/themes/coffee/images',
            caption: 'Accidente'
        }).navGrid('#pager', { edit: true, add: true, search: false, del: false },
                  { closeAfterAdd: true, closeAfterEdit: true });
        // add custom button to export the data to excel
        jQuery("#list").jqGrid('navButtonAdd','#pager',{
            caption:"", 
            onClickButton : function () {
            jQuery("#list").jqGrid('excelExport',
                                   { url: '/Accidentes/ExportarAccidentes' });
            }
        });
    });

</script>

<%-- HTML Required--%>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

Please, can someone help me?

Answer 1

The restoreRow and editRow methods, which you use, are defined in the grid.inlinedit.js file and are the part of the inline editing module (see more in the jqGrid documentation). Moreover you should remove the file jquery.jqGrid.min.js to avoid having definitions of the same functions twice. Because the method restoreRow was not defined in the jquery.jqGrid.min.js which you use you use probably wrong downloaded jqGrid version. You should download the jqGrid one more time and be sure that you check “Inline Editing” module. If you open jquery.jqGrid.min.js file in the text editor you will see in the comment at the begining of the file all modules which was the part of the download.

Some additional small remarks: in the documentation is described which parameters of the colModel are default. For example, width:150 and align:'left' have defaout values, so you can remove there from the column definition.

The value property for “select” type of the editoptions which you use is wrong. The Plantas should be defined as

var Plantas = { 'Pablo Podesta':'Pablo Podesta', Pilar:'Pilar',
                Tigre:'Tigre', Otra:'Otra'};

or as

var Plantas = 'Pablo Podesta:Pablo Podesta;Pilar:Pilar;Tigre:Tigre;Otra:Otra';

See the documentation for details.

The parameter imgpath is deprecated and should be removed. Class “scroll” is also deprecated and the HTML fragment for the jqGrid can be reduced to

<table id="list"></table>
<div id="pager"></div>

See an example here.

The parameter edit is not exist in the jqGrid it is the parameter of editGridRow from the form editing. You can define it as the part of navGrid parameters prmEdit and prmAdd. Currently you use only prmEdit. Probably the usage of grid.locale-XX.js from the i18n directory will make the usage of edit parameter unneeded.