Search code examples
jqgridrowaddition

jqgrid did not display any field on edit or add form

I built a very basic jqgrid table. It displays results from the url I provide without problems. If I click on add row or on edit row icon, an empty windows appears without any fields to fill.

Here is my code:

$('#mygrid').jqGrid({  
        colMenu: true,
        url: 'someurl.php',
        datatype:'json',
        colNames:['NUMB','ACCNAME','MEMO','TOTAL','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC','JAN','FEB','MAR'],
        colModel: [
            { name: "ACCOUNT_NUMBER",  width:60},
            { name: "ACCNAME",  editable: "true"},
            { name: "DETAIL",  editable: "true", edittype:"textarea", editoptions:{size:10} },
            { name: "TOTAL",  width:75, classes:'text-primary', editable: "true",editoptions:{size:10}  },
            { name: "APR", index: "APR",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "MAY", index: "MAY",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "JUN", index: "JUN",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "JUL", index: "JUL",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "AUG", index: "AUG",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "SEP", index: "SEP",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "OCT",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "NOV",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "DEC",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "JAN",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "FEB",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "MAR",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10}  }

        ],
        viewrecords: true,
        emptyrecords: "Nothing to display",
        rowNum: 15,
        styleUI : 'Bootstrap4',
        iconSet : 'Octicons',
        pager : '#gridpager',
        autowidth : true, 
        shrinkToFit : false,
        height : '75%',
        rowList : [10, 20, 30],
        altRows : true,
        toppager : true,
        caption: "something",
        editurl : 'anotherurl.php'


});
$("#mygrid").jqGrid('navGrid','#gridpager',{add:true,edit:true,del:true,search:true,refresh:true});

Here the empty windows that pop-up:

enter image description here

Solution

  • the problem you have is with setting the editable property. You set it as string, but it should be a boolean. In colModel items replace

    editable : "true"

    with

    editable : true

    This is a big difference in Javascript