All geek questions in one place

Make jqGrid moveable

As it turned out, jqGrid is based on the jQuery dialog box, is it possible to make it movable (like a dialog box)? I was able to put it in a dialog, but it looks weird with two headers, etc. I would think that the necessary class can be added to it to make it movable, but I'm still pretty new to both jQuery and jqGrid.

+4
source share
4 answers

Check out jQueryUI draggable. Take care of you.

http://jqueryui.com/demos/draggable/

+2
source

The idea of ​​using the 'gbox' div is very good. I would only like to improve it a bit to work inside jqGrid, as usual, and be able to drag the grid from the header area. The code may look like

 var myGridId='list'; $('#gbox_' + myGridId).draggable ({handle:"div.ui-jqgrid-titlebar"});

or as follows

 // get DOM element of 'gbox' div var gboxNode = jQuery('#list')[0].parentNode.parentNode.parentNode.parentNode; // make full jqGrid drabable jQuery(gboxNode).draggable ({handle:"div.ui-jqgrid-titlebar"});

The divs structure can be really clearly seen using firebug or the IE developer tools. I started to describe it a bit here. JqGrid bottom mesh “inherits” CSS from cells in the main grid . If it would be nice to add the full documentation of all jqGrid elements to the wiki jqGrid documentation http://www.trirand.com/jqgridwiki .

0
source

I am rewriting this here (with a more general solution) so that the code is readable. This seems to fix the resize issue I had:

  // // Make the grid resizable. // $("#treegrid2").jqGrid('gridResize',{minWidth:350,minHeight:150, stop: function (grid, ev, ui) { $(grid.srcElement).parent ().css ("height", null); } });
0
source

Source: https://habr.com/ru/post/1310314/

More articles:


All Articles