Horizontal scroll bar on the subfile grid

[nascar88]

Is there any thought to adding a horizontal scroll bar to the subfile grid widget in order to show more columns of the subfile when you are limited to screen real estate? Also, would be helpful when you are using the excel/csv download option.(would allow for more columns of data to be downloaded.)

[Brian]

This is something that is under consideration, but we do not have a definite plan at this time.

If you need columns in CSV export but not visible on grid, you may be able to set the columns' widths to 0 in the "column widths" property. I have not tested this, but should work.

[Stuart]

I was searching for this topic (horizontal scrolling within a grid). I wanted to check to see if there was a resolution for this.

Thanks,

Stuart

[Scott Klement]

I don't think that a horizontal scrollbar was ever implemented, unfortunately.

Would a scrollable layout work for you?

[Stuart]

That is probably what I am looking for. I want to place the grid inside of some component to have a viewport in which only the rectangular viewing are of the current grid area is displayed. The grid could be enclosed in some other component, such that the grid would not display outside the boundaries of this component.

[esdaled]

How does one configure a scrollable layout in a browser session? or are they only applicable to mobile development?

I have tried the various layout widgets without success or maybe I am expecting a behaviour that is not possible. I would like to have fixed area on the page that can contain various widgets which can be seen using scrollbars on the fixed area.

[Scott Klement]

How does one configure a scrollable layout in a browser session? or are they only applicable to mobile development?

They were designed for mobile devices to allow large forms to fit in the very small screens of a mobile device. However, it should be possible to make it work in a browser? I haven't tried it, yet... but since the mobile device and the browser are all using the same technology (HTML5) it should be possible to make it work. It may be a little tricky...

I have tried the various layout widgets without success or maybe I am expecting a behaviour that is not possible. I would like to have fixed area on the page that can contain various widgets which can be seen using scrollbars on the fixed area.

I would have to try it myself and figure it out, I think... I could certainly be wrong (wouldn't be the first time.) But, scroller widgets are a little tricky, so probably best for me to figure it out first before trying to give you instructions...

[esdaled]

Thanks for the reply. I will experiment some more and I will let you know if I have success, if not I hope you can let me know how it can be done.

[justinkporter]

Did anyone ever get this to work? I have a project that I'm trying to implement something like a scrollable layout currently (on a desktop browser). I'd love to put a grid inside of a layout and allow the user to scroll horizontally to view other data within the layout.

Is this possible?

[Scott Klement]

Here's how you can try to make this work:

1) Create your subfile, make it as wide as you need. As a test, I made one with 15 columns, each column is 150px wide. Put this down at the bottom, out of the way for now.

2) Total up the column widths, and add some space for a scrollbar. In my example, 15 x 150 = 2250 pixels + about 15ish for the scrollbar = 2265px.

3) Drag a "simple layout" widget onto the screen. At the location where you'll want the subfile to be. TEMPORARILY, use the properties window to set the height to your subfile height (mine was 185, total), and the width to your subfile width from step 2 (2265px for me).

4) Drag a "mobile scroller" widget into the "simple layout" widget. Use the properties window to set the top=0, left=0, height=185px (or your subfile height), width=2265px (or your subfile height).

5) Now move your subfile (by dragging it from one of the data columns -- you can't drag a subfile in the designer by the header columns) into the mobile scroller. Make sure you see the red outline that tells you you're placing the widget inside the scroller... Change subfile's left/top positions to 0.

6) Now (using the elements tab) select the simple layout, and change it's width to 100% (instead of 2265px). The 2265 was only temporary to allow you to design the subfile.. setting it to 100% will make it the width of your browser screen. Do NOT change the width of the mobile scroller -- just the simple layout.

7) Try your screen. It should now be scrollable left/right.


I don't know that I necessarily like this effect -- there may be a better way to do it. But this was an easy way, and perhaps you'll like it better than I do :-)

I've attached a JSON file containing my example. You can use Open / Local File to load it into your designer, and then click Launch/Preview to try it out. (type some data, like 'xxxxxx' into Field2 so it shows some data into the subfile.)