It's not possible to type in the grid add row and edit row dialogs.  The delete dialog, which requires only mouse clicks (no typing) works fine.

The grid loads the first time the dialog is opened, but after that, the dialog opens empty.

I'm new to both jQuery and jqGrid so I could be missing something obvious.  I greatly appreciate your help!

Here's my html:

<img id="btnNotes" alt="" src="images/Button_notes.gif" />

<div id="DialogDiv">

<table id="AppNoteList" ></table>

<div id="tabPagerBar" ></div> 

</div>        

The jQuery is:

var dlg;

$(document).on("click", "#btnNotes", function () {

dlg = $('#DialogDiv').dialog({

autoOpen: false, draggable: true, closeOnEscape: false, resizable: true, position: "center",

dialogClass: 'DynamicDialogStyle',

modal: true,

open: function () {

$("#AppNoteList").jqGrid({

datatype: function (pdata) {

AjaxGetAppNotes(); // JSON call; this is working fine and grid loads correctly.

},

colName: ['AppNotesId', 'DateStamp', 'Note'],

colModel: [

{ name: 'AppNotesId', key: true },

{ name: 'DateStamp' },

{ name: 'Note', width: 400, editable: true, edittype: 'textarea', editoptions: { rows: "5", cols: "60"} }

],

rowNum: 10,

rowList: [10, 20, 30],

pager: '#tabPagerBar',

sortname: 'DateStamp',

viewrecords: true,

sortorder: "desc",

caption: "Applicant Notes"

});

$("#AppNoteList").jqGrid('navGrid', '#tabPagerBar', { reloadAfterSubmit: true, edit: true, add: true, del: true },

//edit options

{url: 'DataAccess.asmx/updateAppNotes', closeAfterEdit: true, editData: { "AppId": "2319957"} }, // AppId hardcoded for example

//add options

{url: 'DataAccess.asmx/updateAppNotes', closeAfterAdd: true, editData: { "AppId": "2319957"} }, // AppId hardcoded for example

//delete options

{url: 'DataAccess.asmx/delAppNote' }

);

},

close: function (e) {

$(this).empty();

$(this).dialog('destroy');

},

height: 350,

width: 800,

title: 'App Notes'

});

dlg.dialog("open");

});