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.

Dave
  • 2,546
  • 6
  • 23
  • 29

4 Answers4

2

Check out jQueryUI draggable. Should take care of you.

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

user113716
  • 318,772
  • 63
  • 451
  • 440
  • Thanks, that worked. I had to actually use Firebug to determine how jqGrid assigns the
    . For example:
    gets changed to:
    ...
    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 May 20 '10 at 01:34
  • Gotta love Firebug! Glad it works for you. Don't forget to click the check. :) – user113716 May 20 '10 at 01:40
  • 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 May 20 '10 at 11:55
  • @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! :) – user113716 May 20 '10 at 11:59
0

Are you referring to the drag property?

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

gurun8
  • 3,526
  • 12
  • 36
  • 53
0

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 jqGrid footer cells "inherits" CSS from cells in the main grid. If would be nice to add a full documentation of all jqGrid elements to the jqGrid Wiki documentation http://www.trirand.com/jqgridwiki.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • 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 May 20 '10 at 11:57
  • 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 May 20 '10 at 12:05
  • 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 May 20 '10 at 12:10
  • 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 May 20 '10 at 13:14
  • 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 May 20 '10 at 13:37
0

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
  • 2,546
  • 6
  • 23
  • 29