jQuery Grid Plugin - jqGrid

I have a custom edit dialog control that is supposed to work as follows:

• The custom  "edittype" contains a select control (drop-down list) and a "Find" button.
• The button "onclick" event launches a "search" dialog that contains a text box and "submit" and "cancel" buttons.  When the submit button is clicked, an AJAX server call is made, and a list (for the drop-down) is created – based on the criteria in the text box – and returned.

To prototype this, I created a jQuery dialog with a select control and button, and I called my dialog from it. It worked as specified.

When I incorporate it into the editGridRow dialog, it fails as follows: the "search" dialog opens for a second and then both the search and edit dialog close and my grid refreshes.

It appears that I have not properly implemented the "handshake" with jqGrid. (Although, I don't know what is wrong.) I'd appreciate any help and suggestions. The code follows.

The jqGrid column model entry for the custom form element:

  { name:'ItemId', index:'ItemId', hidden:true, width:40, resizable:false, fixed:true,
    align:'left', editable:true, editrules:{edithidden:true}, edittype:'custom',
    editoptions:{ custom_element:SearchSelectElem, custom_value:SearchSelectVal } },

The HTML to launch the edit dialog:

  <a href="#" class="jqg-grid-edit"
    onclick="jQuery('#jqg_table')
               .jqGrid( 'editGridRow', 1,
                        { width:400, savekey:[true,13], url:'/Account/UserEdit',
                          modal:true, reloadAfterSubmit:true, closeAfterEdit:true,
                          onclickSubmit:CreatePostList, afterSubmit:CheckSubmitStatus } );">
    <span class="ui-icon ui-icon-pencil"></span>
  </a>

The custom element code (SearchSelectElem) builds the following control:

  <div>
    <select id="ItemId-sel" style="width: 200px;" size="1″>
      <option value="1″>Current Item</option>
    </select>
    <button id="ItemId-btn" onclick="ShowDlog();">Find</button>
  </div>

The js code triggered by the button's onclick event:

  function ShowDlog()
  {
    // create the dialog content and attache it to the custom element field
    //   (I got the same resultes when I appended it to my "main content" div.)
    var dlog = '<div id="ItemId-dlog" title="Search Clients" style="display:none">'
             +   '<input type="text" id="ItemId-dlog-inp" name="ItemId-dlog-inp">'
             + '</div>';
    jQuery('#ItemId').append( dlog );

    // create the dialog
    jQuery('#ItemId-dlog')
        .dialog({
          autoOpen: false, modal: true, title: 'Search clients', position: [120,120],
          buttons:
          {
            'Find': function () { jQuery(this).trigger('submit'); },
            Cancel: function () { jQuery(this).dialog('close'); }
          },
        })
        .bind('submit', function(event) { Dlog_Post( event ); });
                    
    // open it
    jQuery('#ItemId-dlog').dialog('open');
  }