tags:

views:

221

answers:

4

As it appears that jqGrid is based on the jQuery dialog, is it possible to make it movable (like a dialog)? I've been able to put it inside of a dialog but it looks odd with two title bars and such. I'd "think" that the necessary class could be added to it to make it movable but I'm still fairly new at both jQuery and jqGrid.

+2  A: 

Check out jQueryUI draggable. Should take care of you.

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

patrick dw
Thanks, that worked. I had to actually use Firebug to determine how jqGrid assigns the <div>. For example: <table id='jqGridTest'></table>gets changed to: <div id='gbox_jqGridTest'>...</div>Once I saw what it named the grid, I just added: $('#gbox_jqGridTest').draggable ()and it was draggable. Just gotta make the mouse cursor a bit different and I'll be set, thanks :).
Dave
Gotta love Firebug! Glad it works for you. Don't forget to click the check. :)
patrick dw
Actually, Chrome (at least the Beta/Developer's version) has some "amazing" tools for inspecting the DOM including timings, etc. Try it out sometime, it's very impressive.
Dave
@Dave - Yeah, I do bounce back and forth a bit. They each have their strengths. I use Safari's sometimes. I think it must be part of Webkit, because Chrome's look almost identical (though perhaps extended). Thanks for the checkmark! :)
patrick dw
A: 

Are you referring to the drag property?

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

gurun8
I think that only effects the forms that it creates, not the entire grid (though I could be mistaken).
Dave
Patrick's answer about jQuery UI Draggable is probably your best bet.
gurun8
A: 

The idea to use 'gbox' div is very good. I would like only a little improve it to be able work inside of jqGrid like usual and be able to drag the grid from its header area. The code can look like

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

or like following

// 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 structure of divs can be really good seen with firebug or developer tools of IE. I start to described it a little here http://stackoverflow.com/questions/2683108/jqgrid-footer-cells-inherits-css-from-cells-in-the-main-grid/2697747#2697747. If would be nice to add a full documentation of all jqGrid elements to the jqGrid Wiki documentation http://www.trirand.com/jqgridwiki.

Oleg
That's a very good idea (about documenting the jqGrid elements). Something similar to how jQuery documents the Dialog div structure. That single diagram has been invaluable to me at times (link: http://docs.jquery.com/UI/Dialog/Theming ).
Dave
There does seem to be a bug in jqGrid, however, when resizing is enabled that seems to have nothing to do with making it draggable. If you try out the "resizing" demo on their demo's page (in the 3.6 section); just make the grid bigger or smaller and then press the minimize button. There's a small thin border that's not being resized.
Dave
Incoming message spam...It appears that the "gbox_" div has not height associated with it "until" the jqGrid is resized the first time. Without a height, minimizing works. Once it's resized, the height gets added to the style and the minimizing starts leaving the border. I think I'll add a fix to my code to remove that style after a resize event.
Dave
Ok, so here's how I fixed it (I added a stop function that seems to be in the source code as an available option): // // Make the grid resizable. // $("#treegrid2").jqGrid('gridResize',{minWidth:350,minHeight:150, stop: function (grid, ev, ui) { $("#gbox_treegrid2").css ("height", null); } });
Dave
I recommend you to post this bug in http://www.trirand.com/blog/?page_id=393/bugs/. Till now I have very good experience with this jqGrid forum. How you can see, I am currently in the top 4 most posted people of this forum and all real bugs which I found and the most of feature suggestions are implemented in the current version of jqGrid. What you find out is a clear bug. So it would be better to fix it in the original version of jqGrid. Then moving to the next version of jqGrid will be also easier for you in the future.
Oleg
A: 

I'm reposting this here (with a more generic solution) so that the code is readable. This seems to fix the resize issue I was having:

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