jqGrid Reposition Delete Confirmation Box

by

I find is not a dupe. On the opposite I find it good so +1 from me.

The jqGrid use internally the method viewModal ($.jgrid.viewModal) which shows the most dialogs. The method has toTop parameter, but and delGridRow and editGridRow dosn’t use it and it will be set to toTop:true. So the Add, Edit and Delete dialogs will be displayed always to the top of the grid which can be inside of inviable area.

To fix the problem you can define the afterShowForm event handle which change the dialog position. For example

$("#list").jqGrid('navGrid','#pager', {}, {}, {},
                  {
                      afterShowForm: function($form) {
                          var dialog = $form.closest('div.ui-jqdialog'),
                              selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
                              selRowCoordinates = $('#'+selRowId).offset();
                          dialog.offset(selRowCoordinates);
                      }
                  });

In the example the dialog will be placed over the selected row. The code can be improved for the case when the selected row in the last row and the bottom part of the dialog is outside of the window. Nevertheless the above implementation seems me better as the default one because the user see the dialog exactly over the row which he want to delete and he can move the dialog so that it will be full visible.

You can test the suggested movement of the Delete dialog on the live demo.

More Related Contents:

  1. How To Create Or design popUp windows for Edit ro Insert [closed]
  2. How to fire loadComplete after new row is added in jqgrid?
  3. jqGrid get “th” and “thead” using jQuery
  4. Setting the content-type of requests performed by jQuery jqGrid
  5. jqgrid reloadGrid with loadonce set to true
  6. can jqgrid support dropdowns in the toolbar filter fields
  7. jqGrid custom format fails on addClass
  8. jqGrid data stored in browser cache?
  9. is there an api in jqgrid to add advanced filters to post data?
  10. Jqgrid – grouping row level data
  11. jqgrid client side sorting with server side paging – data disappears
  12. How do I change selected value of select2 dropdown with JqGrid?
  13. jqGrid iterate over the grid Data in a subgrid
  14. Multiple search with multiplefields by default
  15. How to update value of data in jqgrid
  16. JQGrid: How can I refresh a dropdown after edit?
  17. Local form editing demo and jqGrid 4.4.1
  18. jqGrid treeGrid catch expand collaps events
  19. jqGrid auto filter highlighting search result
  20. jqgrid load large data set without pagination
  21. jquery with ASP.NET MVC – calling ajax enabled web service
  22. How to get jqGrid reload to go to server?
  23. How to merge cells in jqGrid 4.0
  24. In JQGrid, Is it possible to use different formatter on grouping summary cell other than column formatter?
  25. Using bootstrap select2 with JqGrid form
  26. JQGrid: Loading data into the footer row
  27. In-cell data bars in jqGrid – possible or not?
  28. Remove vertical lines in jqGrid
  29. How to create jqGrid Context Menu?
  30. jqGrid with automatic height; but has a max height & scrollbars

Leave a Comment