TreeGrid in Splitter: Vertical scroll bar only showing after resizing browser

[jqspotrParticipant]

Hi,

I’m currently evaluating jQWidgets. In my first attempt I’m trying to produce something similar to Windows Explorer.

I use a jqxSplitter with two panels in horizontal alignment.
The splitter is set to width = height = 100%.

The left panel contains one jqxTreeGrid with width and height set to 100%.
The right panel also contains one jqxTreeGrid with width and height set to 100%.

Paging is off for the right panel.
When I now load 200 rows into the grid, it loads all rows, but no vertical scroll bar is displayed…
When I resize the browser window a bit, the vertical scroll bar shows up and can be used to scroll the grid rows.

I tried both Firefox and Chrome, both show the same behavior. Slightly changing the browser window size makes the vertical grid scroll bar appear.

I tried various things and googled a lot, but I don’t find a solution. I based my test on the samples provided on your web site.

[Peter StoevKeymaster]

Hi jqspotr,

Working sample with TreeGrid within Splitter – http://jsfiddle.net/jqwidgets/rnp88aur/. The TreeGrid’s width and height are 100%.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jqspotrParticipant]

Hi, Peter

Thanks for looking into this.
I have updated your example to show the effect.

Run the example. No scroll bar.
Resize the browser window a tad to make the scroll bar appear again.

[Peter StoevKeymaster]

Hi jqspotr,

If you need working solution, use the approach which I suggested you in my example.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[jqspotrParticipant]

Your solution did not use panels, only one grid and a fixed height.
Not really what I need to implement. So I played around with this for a while, and found the solution:

The trick is to add an extra div around the div containing the grid:

<div id="splitter">
    <div>
      <div id="leftGrid"></div>
    </div>
    <div>
      <div id="rightGrid"></div>
    </div>
</div>

You used that in your solution, but did not explain that this way the key. Hence it took me a while to figure out what the work-around is.

Thanks for your support.

[Peter StoevKeymaster]

Hi jqspotr,

All demos about jqxSplitter work in that way. The Splitter has 2 Panels represented by DIV tags and if you want to put content inside these Panels, you have to define it within these DIV tags i.e like in the demos and documentation topics about this widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts