jqGrid recreateForm parameter

Hello I'm trying to setup the jqGrid's recreateForm parameter to true in order to solve problems originated by using custom edittype columns. Here I found the best form to do that is putting this line:

   jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });

I tried it without success. Anybody can help me?

The code of the wiew I have problems is...

$(document).ready(function() {
    jQuery("#list").jqGrid({
        url: '<%=Url.Action("buildGridData") %>',
        editurl: '/tipomovi/Edit/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Codigo', 'Descripción', 'Tipo Movimiento', 'Inventario Propio',
                   'Tipo Mov. Soporte', 'Clase Bodega Destino'],
        colModel: [
            { name: 'timocodi', index: 'timocodi', key: true, align: 'left',
              width: 85, editable: true, edittype: 'text',
              editrules: { required: true, integer: true} },
            { name: 'timodesc', index: 'timodesc', align: 'left', width: 300,
              editable: true, edittype: 'text', editoptions: { maxlength: 40 },
              editrules: { required: true} },
            { name: 'timosaen', index: 'timosaen', align: 'center', sortable: false,
              width: 120, editable: true, edittype: 'custom',
              editoptions: { custom_element: ESElement, custom_value: ESValue },
              editrules: { required: true} },
            { name: 'timoprop', index: 'timoprop', align: 'center', sortable: false,
              width: 120, editable: true, edittype: 'checkbox',
              editoptions: { value: "S:N" }, editrules: { required: true} },
            { name: 'timomvso', index: 'timomvso', align: 'center', sortable: false,
              width: 130, editable: true, edittype: 'text' },
            { name: 'clbodesc', index: 'clbodesc', align: 'left', sortable: false,
              width: 200, editable: true, edittype: 'select',
              editoptions: { size: 71 }, editrules: { required: true}}],
        pager: $('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'timocodi',
        sortorder: 'asc',
        viewrecords: true,
        viewsortcols: [true, 'vertical', true],
        imgpath: '/content/redmond/images',
        caption: 'Tipos de Movimientos de Inventario',
        width: 'auto',
        shrinkToFit: false,
        height: 'auto',
        loadComplete: function() {
            jQuery('#list').setColProp('clbodesc', {editoptions: {value: clases}});
        }
    });
    jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });        
});

where

function ESElement(value, options) 
{
    //debugger;
    var v1 = ""
    var v2 = ""
    if (value == "E") {
        v1 = "checked";
    }
    else {
        v2 = "checked";
    }
    var elemStr = '<div><input type="radio" name="es" id="entrada"  value="E" ' + v1 +
                 ' /> Entrada ' +
                 '&nbsp;&nbsp; <input type="radio" name="es" id="salida" value="S" ' +
                 v2 + ' /> Salida </div>';
    return $(elemStr)[0];
};
function ESValue(elem) 
{
    rb = elem[0].all[0].checked + ' ' + elem[0].all[1].checked;
    return rb;
};

Oleg, Hi. Below is the complete code of the view: ....

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Tipo de Movimiento
</asp:Content>


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

    <h2>Tipo de Movimiento de Materiales</h2>
    Modo de Edición: 
    <input type="radio" name="rdEditApproach" onclick="inlineEdit();" /> En linea
    <input type="radio" name="rdEditApproach" onclick="formEdit();" /> Forma<br /><br />
    <%=Html.ActionLink("Ir al Menu", "Index", "Menu")%> 
    <table id="list" cellpadding="0" cellspacing="0"></table>
    <div id="pager" style="text-align:center;"></div>
<script type="text/javascript">
    var clases = $.ajax(
                       { url: '/tipomovi/clase/', async: false,
                           success: function(data, result) {
                               if (!result)
                                   alert('Fallo recuperacion de clases de Bodega');
                           }
                       }).responseText;

    var lastSel;

    $(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '<%=Url.Action("buildGridData") %>',
            editurl: '/tipomovi/Edit/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Codigo', 'Descripción', 'Tipo Movimiento', 'Inventario Propio', 'Tipo Mov. Soporte', 'Clase Bodega Destino'],
            colModel: [
              { name: 'timocodi', index: 'timocodi', key: true, align: 'left', width: 85, editable: true, edittype: 'text', editrules: { required: true, integer: true} },
              { name: 'timodesc', index: 'timodesc', align: 'left', width: 300, editable: true, edittype: 'text', editoptions: { maxlength: 40 }, editrules: { required: true} },
              { name: 'timosaen', index: 'timosaen', align: 'center', sortable: false, width: 120, editable: true, edittype: 'custom',
                  editoptions: { custom_element: ESElement, custom_value: ESValue }, editrules: { required: true}
              },
              { name: 'timoprop', index: 'timoprop', align: 'center', sortable: false, width: 120, editable: true, edittype: 'checkbox', editoptions: { value: "S:N" }, editrules: { required: true} },
              { name: 'timomvso', index: 'timomvso', align: 'center', sortable: false, width: 130, editable: true, edittype: 'text' },
              { name: 'clbodesc', index: 'clbodesc', align: 'left', sortable: false, width: 200, editable: true, edittype: 'select', editoptions: { size: 71 }, editrules: { required: true}}],
            pager: $('#pager'),
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'timocodi',
            sortorder: 'asc',
            viewrecords: true,
            viewsortcols: [true, 'vertical', true],
            imgpath: '/content/redmond/images',
            caption: 'Tipos de Movimientos de Inventario',
            width: 'auto',
            shrinkToFit: false,
            height: 'auto',
            loadComplete: function() {
                jQuery('#list').setColProp('clbodesc', { editoptions: { value: clases} });
            }
        });
        jQuery.extend(jQuery.jgrid.edit, { recreateForm: true });        
    });


    function ESElement(value, options) 
    {
       //debugger;
       var v1 = ""
       var v2 = ""
       if (value == "E") {
         v1 = "checked";
       }
       else {
         v2 = "checked";
       }
       var elemStr = '<div><input type="radio" name="es" id="entrada"  value="E" ' + v1 + ' /> Entrada ' +
                     '&nbsp;&nbsp; <input type="radio" name="es" id="salida" value="S" ' + v2 + ' /> Salida </div>';
       return $(elemStr)[0];
    };
    function ESValue(elem) 
    {
       rb = elem[0].all[0].checked + ' ' + elem[0].all[1].checked;
       return rb;
    }; 

    function inlineEdit() {
        $('input[name=rdEditApproach]').attr('disabled', true);
        $('#list').navGrid(
                '#pager',
        //Activando botones
                {add: true, del: true, edit: false, search: false },
        //opciones de adición
                {width: 'auto', url: '/tipomovi/Create/' },
        //delete options
                {url: '/tipomovi/Delete/' }
            );
        //add onSelectRow event to support inline edit
        $('#list').setGridParam({
            onSelectRow: function(id) {
                if (id && id != lastSel) {
                    //save changes in row 
                    $('#list').saveRow(lastSel, false);
                    lastSel = id;
                }
                //trigger inline edit for row
                $('#list').editRow(id, true);
            }
        });
    };

    function formEdit() {
        $('input[name=rdEditApproach]').attr('disabled', true);
        $('#list').navGrid(
           '#pager',
           //enabling buttons
           {add: true, del: true, edit: true, search: true},
           //edit option
           {width: 'auto'},
           //add options
           {width: 'auto', url: '/tipomovi/Create/' },
           //delete options
           { url: '/tipomovi/Delete/',
             width: 'auto',
             afterSubmit: function(r, d) {
                 return [r.responseText == "", r.responseText];}
             },
           //search options
           {url: '/tipomovi/buildGridData/', width: 'auto', closeAfterSearch: true }
           );       
    };  // function FormEdit


</script>
</asp:Content>

The style how you write ths code is quite other as I do, so it is difficult for me to find exactly where you have a problem.

The only clear error which I see is that you use wrong parameters of navGrid in the inlineEdit function. You should insert some {}, to define add and delete parameters. Currently you use urls of 'Add' parameters for 'Edit' operation and Delete for 'Add' operation. I am not sure that it is the error which you are searching.

What I do always in my code is:

I make clear separation of JavaScript code from the the ASP.NET MVC View. The View hat typically only include of <script> with the reference to the .js file. At least 99% of the code are outside of View. The MVC concept ifself sey that View should has mostly no code and logic. If should only view the data prepared in the controller. Moreover the Javascript file is static file and can be good cached on the client side.
I try to use the less global variables the possible. In your current code clases, lastSel, ESValueESElement, ESValue, inlineEdit, formEdit are all grobal objects.
I try no time to use constructs like <input onclick="inlineEdit();" /> because the functions called by onclick event must be global. Today I answerd already on a question about the subject. Instead of 'onclick' you could inside of $(document).ready(function() { function somewhere the code $("#inlineEdit").click(function(e) {/* the code of inlineEdit */}); where id="inlineEdit" whould be id from the first <input> button.
To tell the trust I see no sense to have a radio button which will be deactivated at the first click and which define which editing mode you use, I personally have in the most jqGrids both modes enabled. The only thing which you should do is to call restoreRow(lastSel) in the beforeInitData event hanbler of the form edit. I suggested to include this call in the standard jqGrid code. On http://www.ok-soft-gmbh.com/jqGrid/DatePicker.htm you can see one example which do this live. Moreover in the most grids I use double click to go in the inline editing mode (see http://stackoverflow.com/questions/2863874/jqgrid-edit-only-certain-rows-for-an-editable-column/2866685#2866685). It makes in my opinion the scrolling of grid to view the data easier in case when the grid will be displayed not only for editing, but for showing the data also.

UPDATED: One more small remark. You calculate the value of clases outside of $(document).ready which is not good and you do this synchronous. You use there as value of editoptions. You should use dataUrl instead. If the data returned by '/tipomovi/clase/' need be changed you can use additionally buildSelect function. This way exist since some version of jqGrid. The parameter imgpath instead are deprecated.

ansaurus

tags:

views:

answers:

jqGrid recreateForm parameter

related questions