Dynamically set scroller height?

[ZoeW]

Hi,

we have a tablet screen which is a subfile, the number of records in the subfile can vary.

If the height of all the subfile rows are less than the height of the scroller then a large blank area appears after the last record.
If the total height of all rows is more than the height of the scroller, then we don't get to see all of the records.

I would like to dynamically set the scroller height in onLoad as at that point I will know how many rows I want to display, however I get the feeling that it cannot be over-ridden as the height of the scroller doesn't seem to vary, despite my height value being applied and visible in the html in debug.
Below is the code from onLoad where I am trying to set the height

Code: Select all

myRows = parseInt(get("trrn2"),10);
var mygrid = getObj("grdSummary");


var newHeight = (myRows / 9) * 100;
var textHeight = newHeight.toFixed().toString().trim()+"%";

applyProperty("scroller1","height",textHeight);
applyProperty("scroller1","field type","layout");

if (mygrid && myRows !== 0) {
  mygrid.grid.setNumberOfRows(myRows);
  mygrid.grid.render();
  applyProperty("sfl2", "visibility", "visible");
}

Many thanks

Zoe

[Scott Klement]

I'm not understanding why you are using a scroller? Subfiles scroll vertically on their own (there is no need for a scroller.) Also the "expand to layout" property on the grid will cause it to automatically resize to fit the layout that you've placed it inside. So, what is the purpose of the scroller? Normally scrollers are to allow you to have data that does not fit on the display so that it can be scrolled around -- but it sounds like that isn't the problem, here?

[ZoeW]

Hi Scott

Thanks for the reply.

What we are trying to achieve is a smooth list of data - a bit like when you browse a long website on your tablet, you can easily flick the screen up and down. The subfile doesn't quite do this as it's governed by scrolling n number of rows depending on how far you move your finger. If it was just a page of data you could in fact scroll a bit and stop with half a row displayed at the edge of the viewable area.

I'm probably not explaining this very well and we may be trying to achieve something that cannot be done.

I think we will have to go with it not being in scroller.

Thanks

Zoe

[Scott Klement]

So you are trying to put the entire subfile on the display at one time (i.e. the "page size" is the entire subfile) and then use the scroller for scrolling, correct? that way the whole thing can be scrolled around the screen, it doesn't have to be single rows at a time.

I suspect that won't work because the grid will handle the swipe events rather than pass them through to the scroller.

But, even if it did work, I don't understand why you want to dynamically change the height of the scroller?

[ZoeW]

So you are trying to put the entire subfile on the display at one time (i.e. the "page size" is the entire subfile) and then use the scroller for scrolling, correct? that way the whole thing can be scrolled around the screen, it doesn't have to be single rows at a time.

I suspect that won't work because the grid will handle the swipe events rather than pass them through to the scroller.

Yes

But, even if it did work, I don't understand why you want to dynamically change the height of the scroller?

I wanted to dynamically change the height of the scroller as a way to try and remove the blank area from beneath the subfile.

[Scott Klement]

Could it be because the height you're setting has a percent? That would make the new height a percent of the container rather than a fixed size. (i.e. the size would be different on different displays.) Shouldn't you make it the exact pixel size of the height of the grid?

Or, are you saying that applyProperty() won't change the height at all? (I haven't tried it, myself.)

[Colin McNeill]

Zoe,

Our team has created an example to show how you can dynamically change the height of the mobile scroller layout widget based on the number of records you have within your subfile.

The JS code is within the onload event of the record format and has been adapted from the code that you sent previously.

Code: Select all

var myRows = parseInt(get("RRN02"),10);
var mygrid = getObj("grdSummary");
var header = 26;
var rowHeight = 50;
var newHeight = header + myRows * rowHeight;

mygrid.grid.setNumberOfRows(myRows + 1);
mygrid.grid.render();

applyProperty("scroller1","height",newHeight + "px");
applyProperty("scroller1","field type","layout");

You can see that we're calculating 'newHeight' which is the product of the total number of records within the subfile and the height of each row in the subfile with the header height added to it. Then we use the applyProperty() to set the mobile scroller layout widget's height property. This is different from what you had previously. We're calculating an exact pixel value, rather than a percentage. This works nicely in the example we created because we have a fixed size to work with.

We also had to change the 'left' property of the subfile grid to allow space for the user to scroll the subfile's records down. As you can see the scrolling is done completely through the mobile scroller layout widget and not the subfile it self. The subfile grid's scroll bar has been turned off and you cannot scroll with the subfile in our example.

Please let us know if you find this information helpful, or if you have more questions or concerns.

Thanks!

Colin

[Scott Klement]

The biggest problem (Colin mentioned it, but only briefly) is that the grid takes control of the swipe events. So if you try to swipe on the grid itself, the grid thinks that you are trying to scroll the grid and not the scroller that it is inside of. So, in Colin's description, he moved the subfile slightly to the left to give an empty space outside of the grid for swiping. That's about the only thing we could think of to make it work without changing the product itself.

However, you might consider adding a feature request that if the scrollbar property = none, it passes the scroll events through to the scroller widget. You can place the feature request by e-mailing support@profoundlogic.com

In Colin's program, however, we had no problem setting the height/size of the scroller. I think yours didn't work because you made the height a percent. Usually that tells the scroller not to allow scrolling in that dimension. A fixed size is needed to enable scrolling, that's how scrollers work. Also, because it's a percent, it'll vary depending on the size of the screen, so you'll get a different result on different devices, which seems like a strange thing to do. (The subfile is not different on different devices, so why would the scroller be?)

Colin's example shows how I would do it.

[ZoeW]

Thanks both.

I have tried the revised code. My subfile contained 160 rows and had the subfile page and subfile rows defined as 9 in the grid.
When the grid loaded it would only show 20 rows. I could see from the DOM explorer that scroller1 had been resized. I tried increasing the page and row sizes but this did not change the outcome.

I've reverted back to having a subfile in a simple container, which works fine (apart from the smooth scrolling effect) and I don't need to leave space at the side for the user to access the scroller.

Thanks for the help.

Zoe

[Scott Klement]

I had a similar problem when I set scrollbar=none. With scrollbar=sliding, I was able to show all rows (I was testing with 99) without a problem.

Removing the scrollbar doesn't help in any way because the grid will take control of the swipe events, either way. That's the feature request Colin was referring to.