Grid in Grid - Inner grid lacks scroolbars

As of grid in grid, has anyone managed to make the inner grid scrollable? I mean, whenever I insert a second grind inside any main grind's cell, the second grid does not show its scrollbars.

I've mande some research and found some quite interesting implementations for grid in grid (v. 2), but all of them seem to have the same inner-grid-scrollbars-problem my implementation has.

There is a Grid in Grid demo by Rob Francis and Carlos at Friends of ActiveWidgets (http://friendsofaw.com/nuke/modules/Demos/new/gridingrid.htm), but try increasing the inner grid data array an see...

Carlos posted another approach (http://www.activewidgets.com/javascript.forum.11951.15/2-0-i-need-a.html), but as soons as his MyDDSpan is inserted in another grid's cell (in his exemple, he does not insert it in any cell... the second grid is a document.body child), it also does not show scrollbars.

I'm I being dumb, or is this a bug?

[ ]'s

Diego,
I suggest a solution in this post,
/javascript.forum.12879.2/best-way-to-expand-collapse.html

But forgot to mention that if you use Ver 1.0 grids as drop-downs does not have this hierarchi-scroll-effect/bug ( that not sure if could be solved-- Alex??) not to mention that if used more than one (are faster in creating/rendering), but what I can confirm is (for the tests i'd done for now) there is nothing wrong mixing ver2.0 and 1.0 libraries.
Thanks/Salu2

Yep... v1 does not seem to have this problem... Mixing both versions may be a workaround, but honestly, thats quite annoying having to deal with 2 different grid APIs at once... Workaround by workaround, guess I'm gonna keep trying to come up with one that uses only v2...

But.. you know.. thas an odd behavior.... I wander if is it something with the Overflow controller or the Scroll.Bars template... maybe something with the cell's stylesheet classes whose properties get inherited by the inner grid...

Thanks anyway Carlos!

Alex, any tips?

[ ]'s

You'r right, even if you need one (or a few) dd-grids with more than 250 rows you definetly need v2.0 ones.
I did not investigate it , but as the workaround i need to do to substitute the expand/collapse -rows I suggest to Rob, and this:
/javascript.forum.12961.1/adjustscrollheight.html
seems that the adjustScrolls event handler is unique for the whole container, so... ??? (i hope it have an easy solution)
Cheers

Well... I'm gonna check the link above, but check this scenario:

- GridA's content does not overflowed (no grid scrollbars needed);
- GridB gets inserted into one of GridA's cell, causing GridA to overflow;
- GridA does not notice the overflow, so you call GridA.getScrollTemplate().refresh();
- GridA's scrollbars get fixed, and, if GridB is also overflowed, so get theirs. :)

I kinda cheared when I noticed that... "Oh, so I just need to call GridB.getScrollTemplate().refresh();", I tought to myself.... but nops... GridB will only get scrollbars IF GridA has them too...

Definitly something is being inherited.... gonna dig more (dude, I need this... lol)

[ ]'s

I did a fast test right now and It worked for me ( explanation)
In my sample (textboxes in cells) reduce the number of rows to get (no overflow )
then add the refresh in this order ( last line is new)

obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
obj.getRowTemplate(row).refresh();
obj.getScrollTemplate().refresh(); }

Then the vertical scroll appears,
So I gess It's a matter of doing the same (in same order) in the drop-down grid. ( did not try this).
( but crazy if every row is expandible)
HTH

NOP, Sorry Diego, I tried also with the drop-down, and is not displayed
( if main-grid isn't) ,
I also tried lieing ( I do it every day to myself, but not to others), so why not try with scroll.refresh() ??
I add +1000 refresh the scroll in Main, then refresh in dropdown, then
-1000 in main, and finally refresh in Main.

Does not work (as with me) so I can't find a way out (scroll?) ;-)

It's more than a simple scroll.refresh()
If you place several rows into grid-2 and resize it's colums to get the horizontall s-bar, then the vertical s-bar appear partially hidden.
Seems to be a more complicate task to solve, I give up
good luck!

Dude, think I've got it :)
2 steps:

1) A complementary adjustScrollBars method:

AW.Grid.Controllers.Overflow._adjustScrollBars = AW.Grid.Controllers.Overflow.adjustScrollBars;
AW.Grid.Controllers.Overflow.adjustScrollBars = function() {

  this._overflowController._adjustScrollBars.call(this);
  
  // I just hate this freaking long sentence ;)
  function getById(id) {
    return document.getElementById(id);
  }
  
  var id            = this.getId();
  var overflow      = "hidden";
  var overflowX     = "hidden";
  var overflowY     = "hidden";
  var marginRight   = "0px";
  var paddingBottom = "0px";
  var spacerWidth;
  var spacerHeight;
  var contentHeight;
  var contentWidth;

  // if not rendered yet
  if (!this.element()) {
    return;
  }

  switch (this.getScrollBars()) {
    case "none":
      spacerWidth   = "0px";
      spacerHeight  = "0px";
      contentHeight = "100%";
      contentWidth  = "100%";
    break;
    
    case "both":  
      overflow      = "scroll";
      overflowX     = "scroll";
      overflowY     = "scroll";
      marginRight   = "20px";
      paddingBottom = "20px";
    break;
  
    case "vertical":
      overflowY     = "scroll";
      marginRight   = "20px";
      spacerWidth   = "0px";    
      contentHeight = "100%";
    break;

    case "horizontal":
      overflowX     = "scroll";    
      paddingBottom = "20px";
      spacerHeight  = "0px";
      contentWidth  = "100%";
    break;
  }
  
  getById(id + "-scroll").runtimeStyle.paddingBottom = paddingBottom;
  getById(id + "-scroll-box").runtimeStyle.overflow  = overflow;
  getById(id + "-scroll-box").runtimeStyle.overflowX = overflowX;
  getById(id + "-scroll-box").runtimeStyle.overflowY = overflowY;
  
  getById(id + "-scroll-content").runtimeStyle.marginRight = marginRight;  
  if (contentWidth) {
    getById(id + "-scroll-content").runtimeStyle.width = contentWidth;
  }
  if (contentHeight) {
    getById(id + "-scroll-content").runtimeStyle.height = contentHeight;
  }
  
  if (spacerWidth) {
    getById(id + "-scroll-box-spacer").runtimeStyle.width = spacerWidth;
  }
  if (spacerHeight) {
    getById(id + "-scroll-box-spacer").runtimeStyle.height = spacerHeight;
  }

}; //adjustScrollBars

2) Comment out these definitions in the stylesheet:

/*
.aw-scrollbars-none .aw-bars-content {
width:100%!important;
height:100%!important;
}

.aw-scrollbars-vertical .aw-bars-spacer {
width:1px!important;
}

.aw-scrollbars-vertical .aw-bars-content {
height:100%!important;
}

.aw-scrollbars-horizontal .aw-bars-spacer {
height:1px!important;
}

.aw-scrollbars-horizontal .aw-bars-content {
width:100%!important;
}
*/

You see.. Basicly, we transfer from CSS to script most of the properties that affect scrollbars so they don't get applied individually for each grid and don't get nested.

Now, works for AW.UI.Grid in AW.UI.Grid and AW.Grid.Extended in AW.UI.Grid.

As of AW.Grid.Extended in AW.Grid.Extended, and AW.UI.Grid in AW.Grid.Extended, I couldn't figure ou yet what is going wrong.. gonna take a look at it later..

Ow, by the way.. i've only tested it on IE 6

[ ]'s

sorry: "...so they GET applied individually for each grid..."

Good Job!
Thanks a ton Diego!

Thank you Diego!,

But there is again another problem of style inheritance. I guess you all figure that:
if the expanded row is selected, the style of aw-rows-selected of the expanded row is applied to all of the inner grid's rows.

As a tricky solution, I guess to change style of selected and expanded row to normal.

Can anyone perhaps Diego suggest a complete solution, Thanks...

Ozgur, before anything, the above adjustScrollBars method does not cover some situations I found out yesterday. I've already fixed it, but I'm just finishing up a complete example to post here, including the "final" adjustScrollBars (I hope it's "final", at least lol).

But to your problem now: explicitly set the following stylesheet definitions (change colors at will, of course):

.aw-grid-header {
  background-color : #F7F7F7;
  color : black;   
}

.aw-grid-row {
  background-color : white;
  color : black;   
}

/* OPTIONAL: alternating row styles
.aw-alternate-even {
  background-color : #F7F7F7;
  color : black;
}
.aw-alternate-odd {
  background-color : white;
  color : black;
}*/

.aw-mouseover-row {
  background-color : red;
  color : white;      
}

.aw-rows-selected {
  background-color : #3366FF;
  color : white;
}

In a single-grid scenario, those classes would only need to change the properties that need to be changed. But when it comes to grid-in-grid, it seems to me that the inner grid will inherit any stylesheet property its parent grid is using at that moment, unless overridden by their own properties. That's what was happening with your inner grid row's background/text colors. Note that, if you set any other CSS property in one of those definitions, you will have to set it on the other ones too so they can override each other when they're supposed to (i.e: font styles).

Now, that may also be true for column's properties... so, in case anything gets inherited when it shouldn't, explicitly set definitions for whatever it is...

I don't think Alex designed AW with grid-in-grid in mind, but if it's gonna support that out of the box, I think a whole stylesheet revision is gonna have to take place, and perhaps some properties will need to be set by AW's scripts (although the script may get "tips" from the stylesheets).

[ ]'s

I understand you well, but I cannot find a way to implement it... I am changing the selectors borders and row's background when row is seleceted easily by css, Also I use adding rows. I think all these make explicitly setting the css very confusing..

If you have see a light, or any good suggestions I will be grateful.