TreeGrid body resize issue

[thop]

Hello,

I am having issues with a tree grid I am loading in our application.

The grid contains a tree and it should fill the whole body layout it is contained in however in my case the grid body doesn't get stretched and is always on 200 px.


TreeGrid body height.

These are the setting we are using for the tree grid and as you can see the height is set to 100% and the grid container has its height set to 100% too.

        setWidth100();
        setHeight100();
        setAlternateRecordStyles(true);
        setShowConnectors(false);
        setCanReorderFields(true);
        setShowOpenIcons(false);  
        setShowDropIcons(false);
        setFolderIcon(null);
        setShowAllColumns(true);
        setShowAllRecords(true);
        setCanGroupBy(true);
        setMinHeight(700);
        setAlign(Alignment.CENTER);
        setSelectionAppearance(SelectionAppearance.ROW_STYLE);
        setSelectionType(SelectionStyle.SINGLE);
        setShowSelectionCanvas(true);
        setCascadeSelection(false);
        setShowSelectedStyle(true);
        setShowPartialSelection(true);
        setCellHeight(42);
        setRecordComponentHeight(42);
        setShowRecordComponents(true);
        setShowRecordComponentsByCell(true);
        setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
        setHoverStyle("ebomHover");
        setHeaderBaseStyle("ebomTreeHeader");
        setLeaveScrollbarGap(false);
        setCanFreezeFields(false);
        setMinFieldWidth(45);
        setMargin(0);
        setHeaderHeight(25);
        setNodeIcon(null);
        setStyleName("topMarginSeparatorNegativBOMGrid");
        setIndentSize(7);
        setMargin(20);
        setEmptyMessage("No data.");
        setEmptyMessageStyle("modalWindowQuestion");
        setLoadingDataMessage("Loading.");
        setLoadingDataMessageStyle("modalWindowQuestion");
        loadTableColumns(fieldsToDisplay);
        setData(rwoReqTree);

If I put setBodyOverflow(Overflow.VISIBLE) the whole grid gets displayed properly but if its bigger then the screen we get no scrollbar on the right side.

Below you can see the grid without Overflow.VISIBLE:


And this is the grid with Overflow.VISIBLE:


The warning I am getting in my developer console is the following: WARN:listPolicy:stretchResize for isc_RWOREQTreeGrid_0 with totalSize: 796 and calculated sizes: 25,200; cannot assign remainingSpace: 571 due to member max size limits



I have also tried to set grid body height to 100% with a draw handler and that hasn't helped and I have tried using css to make the body 100% with setBodyStyleName("rworeqTreeGridBody"), but that has resulted in this:


Is there something I am missing regarding the body resize or is there something I am doing wrong?

[Isomorphic]

What's the appearance you want here? A TreeGrid that only has a handful of rows may be filling it's container, but there would still be blank space as there are not enough rows to fill the container. Rows will not be stretched vertically, if that's what you were expecting.

You can verify that your height settings are working as expected by looking at the size of the TreeGrid in the Watch Tab of the Developer Console.

[thop]

Hello,
sorry if I was unclear. I know that there should be empty space if there isn't enough rows to fill it up but if you look at the screenshot you can see a vertical scroll bar on the grid so that means there is more rows that can be displayed but the grid body isn't using the full height it can. I don't want the rows to stretch vertically I just want to display the maximum number of rows I can on the page but the grid body height is always 200px even when I set its height to 100% and I know there isn't additional members that are below the grid that might be using the space.


I used setStyleName("topMarginSeparatorNegativBOMGrid") on the tree grid and I can see that its using the height properly but for some reason the body of the grid isn't filling it up as you can see in the SS below:

[Isomorphic]

OK, we're not sure how you've created this effect, as setHeight100() works as expected in a simple test, as you can easily verify.

You haven't shown any information about the surrounding container or how it's configured, but your problem may simply be that the TreeGrid is filling its container but the container is smaller than you expect. These kinds of things are, again, trivial to troubleshoot with the Watch Tab.

You may also have applied CSS rules that interfere with the normal behavior of the TreeGrid. Here again, just remove custom styling to test this possibility.

[thop]

We managed to fix it by using:

addDrawHandler(new DrawHandler() {
            
            @Override
            public void onDraw(DrawEvent event) {
                ECRTreeGrid.this.getGridRenderer().resizeBy(0, ECRTreeGrid.this.getHeight()-345);                
            }
        });

[Isomorphic]

OK... for any other readers: do not use this approach, this appears to be a hack put in place to correct an issue elsewhere in their application code. If you experience a similar issue, follow the advice provided by Isomorphic earlier in the thread.