JqGrid reposition the of Add button - jquery-ui

Question

Am a beginner in jqGrid ,where am using navGrid, for Add(Which is used for File Upload), when i click on add button, it pops up a Modal dialog in top, leftside of the page.its very uneasy to go the top and come again is there any way to position the Add dialog and it should show up next to the + button ?
jQuery(table).jqGrid('navGrid',pager,{edit:false,add:true,del:false,search:false,refresh:true,cloneToTop:true},{},{addCaption:'Add',width:500,recreateForm: true,reloadAfterSubmit:false,closeAfterAdd:true,closeAfterEdit: true, closeOnEscape:true, afterSubmit : UploadAttachedFile });

Answer 1

You can change position of Add dialog inside of afterShowForm callback. For example you can use jQuery UI Position to do this.
The demo use the following code
var $grid = $("#list");
...
$grid.jqGrid('navGrid', '#pager', {del:false}, {}, {
afterShowForm: function ($form) {
$form.closest(".ui-jqdialog").position({
of: "#add_" + $.jgrid.jqID($grid[0].id),
at: "left bottom",
my: "right top"
});
}
});
and the results looks like on the picture below
You can change the values of at and my properties of position to have exact results which you need.

Answer 2

Try this:
Add this to your code of Add button
top:400,left:20
your code should look like:
jQuery(table).jqGrid('navGrid',pager,{edit:false,add:true,del:false,search:false,refresh:true,cloneToTop:true},
{},
{
addCaption:'Add',
width:500,
recreateForm: true,
reloadAfterSubmit:false,
closeAfterAdd:true,
closeAfterEdit: true,
closeOnEscape:true,
afterSubmit : UploadAttachedFile,
top:400, //position from top
left:20 //position from left
});