dGrid in Floating Pane, won't sort until I resize larger?

[TracySchloss]

I have a floating pane containing a dGrid/OnDemandGrid that opens when the user clicks the 'Data Table' button.  I'm having problem using the functionality where you can click the header name and have the data sort on that field.  I know there is a lot of styling involved in getting the grids to be just right, but I'm not seeing what I need to fix.  Maybe something with the dgrid scroller?  I also have that nested scrollbar look I don't mean to have. 

As soon as I resize my floating pane, both the extra scrollbar and my headers start looking and behaving the way I expect, allowing me to click on the headers to sort the data in that column. 

I know I have a style problem, but someone spot what I need to change?  It doubt all my code will fit in the thread, but here's my CSS, followed by my jsFiddle link.

 #gridContainer{   height: 90%; } .dgrid {     position: relative;     overflow: auto;     /* This is needed by IE to prevent crazy scrollbar flashing */     border: 1px solid #dddddd;     display: block;     color:black; }  .dgrid-grid {  height: auto;  min-height:350px; }  .dgrid-header {     font-weight: normal;     font-size:12px;     height: auto; } .dgrid-content {     position: relative;     margin-top: 20px;     font-size:12px;     width:inherit; }  .dgrid .dgrid-cell {     min-width: 50px;    border-color: #dddddd;    mid-height:  50px;    padding:5px 0px 5px 0px; }  .dgrid .dgrid-scroller {     max-height: 300px;     position: relative; }  .dgrid .field-OBJECTID, .field-Shape.len {     min-width: 0px; }

http://jsfiddle.net/schlot/xk8k8/

[JonathanUihlein · Accepted solution]

The id of your grid is "undefined_grid" because NCDM is not defined within your queryResultsHandler_toGrid() function. This creates numerous issues when trying to interact with your grid (set up events, resize, etc). You'll definitely want to change that... as well as potentially rethink your application's workflow to better manage its components and modules.

The issue can be solved by resizing your gridContainer (and potentially your grid) when they are shown.

Two changes need to be made to your current code to produce the desired result.


1) I added one line to the very bottom of your queryResultsHandler_toGrid(evt) function:

return grid;

This change was made so I have direct access to the grid's object representation (widget/class).
I would rewrite this part of your application... you might want a function specifically for grid generation, which would return the grid object to an easy-to-access variable in your require scope.

2) Resizing on callback:

Line 223:

  currentQTask.on('complete', function(evt){         var grid = queryResultsHandler_toGrid(evt);            grid.resize();         registry.byId("gridContainer").resize(); });

NOTE:
I removed almost all of your generic dgrid CSS (not cell or row) as it was causing issues with DOJO's automatic resizing.

[TracySchloss]

The code I lifted this from knew what NCDM is, I just neglected to get it defined for this thread.  All the styling I got from another thread I posted a while back.  For that problem, it seemed like I needed it all, so I just copied it into this project.   I had been adding more and more to it, when I should have been taking things out.  Live and learn.