Fast Scrolling in FlowLayoutPanel on tablet

Marcel Koch asked 2016-12-12 15:42:21 UTC

Hi there,

we created a simple User Control, containing a Panel (size 300, 100) with a few Labels on it to display customer data, and populated a

FlowLayoutPanel with multiple instances (20 -50) of the User Control. Now we have two problems:

On a tablet (iPad) the Scrolling within the FlowLayoutPanel isn't fluid and gets stuck. The Scrolling inside a GridView is fluid on the other Hand. Any idea how to achieve the same behavior within the FlowLayoutPanel?
We use Application.StartTask and Application.Update to load additional User Controls of the same type, which works fine most of the time. But sometimes not all Elements are visible within the FlowLayoutPanel, although they are alle the same and generated with the same Code.

We hope you can provide us with some new new ideas on these topics.

Greets

Marcel

Luca answered 2016-12-12 16:54:07 UTC

Hi Marcel, couple of questions:

Are you using the latest build?

Can you send a test case so that we make sure we are looking at the same thing?

Does the scroll work correctly on a desktop?

Does issue 2 occur on a desktop too and with the latest build?

Best,

Luca

Marcel Koch answered 2016-12-13 16:01:03 UTC

Hello and thanks for the fast answer,

yes we are using the latest build (1.3.16). I send you an example project in VS 2015 (the Wisej.Web and Wisej.Core DLLs are missing because of the max upload size) and the scroll works fine on a desktop. Mobile and tablet stuck while scrolling.

Regarding issue 2 i try to create another example project to show the issue.

Greets

Marcel

Marcel Koch answered 2016-12-16 15:20:33 UTC

Hi again,

i just wanted to ask if you could experience the same scrolling behavior on tablet and mobile devices with our test case project and maybe have any further advice for us.

Best,

Marcel

Luca answered 2016-12-16 17:56:26 UTC

Not yet, setting up the samples on a test server that can be reached with a real tablet and not an emulator.

Question: I noticed a lot of Application.Update() and Thread.Sleep() in there. Is it to emulate load or why do you need those?

I also noticed an issue with the scrolling jumping to top when adding the controls and other issues that I will address in your sample and send the code back to you.

Best,

Luca

Luca answered 2016-12-16 20:55:53 UTC

Please try this: http://demo.wisej.com/apps/flowlayouttest

This is what I get now: https://www.screencast.com/t/Pu6peTdWT

Marcel Koch answered 2016-12-19 11:16:32 UTC

Hello Luca,

yes we used a lot of Application.Update() and Thread.Sleep(), because when we added 50 User Controls or more to the FlowLayOutPanel the whole UI got frozen until everything was loaded. To avoid this we used Application.Update() to simulate dynamic loading.

Anyway, the demo-app you published works exactly as we wished, what are your changes and can you give us the improved code.

Greets,

Marcel

Luca answered 2016-12-20 00:27:16 UTC

Hi Marcel,

Thanks. The fix will be in the next build. It's not just a change to your test app.

Also, calling Thread.Sleep() ends up slowing down the server, it won't help on the client rendering side at all. If you call Application.Update(this) while adding panels, the server immediately all the "screen" updates to the client (if you are on a WebSocket connection) and then keeps running. In your case, if you call Application.Update() while adding child panels, the panels show up on the client as they are added (only on WebSocket).

When you create 50 panels with about 20 controls each, at the end of the request Wisej sends back the JSON definition for 1,000 widgets. The client side can create those objects in milliseconds, but then the browser has to render probably 5,000 elements all at once, with many reflows. That's the freezing that you see, it happens when the browser is rendering dom elements. You can see that with F12 and looking at the screen frames.

There is a compromise between speed and screen update. If you want more "fluidity" while the browser is busy, Wisej can suspend the creation of the dom elements and process the updates only when the browser fires an animation frame (the option is "optimizeFrames" set it in Default.json as "options": { "optimizeFrames": true }). However, I don't think it will help much since in this case, you can see the difference only when the rendering frame is very long.

I'd suggest to create fewer panels at each iteration. You could also handle the Scroll event on the panel and load new child panels automatically, creating the typical infinite scrolling that you see around. I'll send you a modified sample once the fixes that are required are released.

Best,

Luca

Luca answered 2016-12-22 19:04:20 UTC

Hi Marcel,

I have attached your sample app modified to use infinite scrolling. You can also easily change it back to use a button at the end of the scrolling. Notice that instead of disposing and recreating the button (now a label) I have simply re-added it to the Controls collection after adding the additional child panels - it will go to the bottom automatically.

HTH

Best,

Luca

Marcel Koch answered 2016-12-23 14:08:36 UTC

Hi Luca

and thanks again for the answer. This really helped a lot.

Best,

Marcel

André Holz answered 2017-01-05 09:25:15 UTC

According to the example,

I can’t find the ‘Scroll’ event any more in the properties of the FlowLayoutPanel. CodeBehinde gives me the option to choose FlowLayoutPanel.Scroll, but the event isn’t fired anymore.
As a nasty fix, I use the MouseWheel event, but this will not be a fitting ‘solution’.

I’m using version 1.3.20.0

Marcel Koch answered 2017-01-19 12:49:44 UTC

Hi Luca,

sorry i have to ask one more time but the solution for "endless scrolling" doesn't work anymore since I updated to 1.3.23 (it worked fine in 1.3.18). The FlowLayOutPanel got no scroll-event in the newest release, so i can not check if the user already hit the bottom of the FlowLayOutPanel while scrolling. Will the scroll-event return in a later release? Or is there any other way to achieve the same behaviour in 1.3.23?

Best,

Marcel

Luca answered 2017-01-19 16:07:12 UTC

Sorry, it's a regression, one more test to add to the regression tests. I can send you a quick patch or you can download a dev build with the fixes by this evening.

Marcel Koch answered 2017-01-20 15:42:50 UTC

Hi Luca,

I tried the new dev-build 1.3.24 and the scroll-event worked again. Thanks a lot. But I recognized I couldn't add the event in Visual Studio Designer (I use VS 2015) anymore, because it is no longer available. I can add the scroll event only in the Code.cs. The same issue occurs for other events and properties of other controls, e.g. the new ShowLoader-property from 1.3.23. It is no problem as long as I know which events and properties a control contains. Maybe I missed something and the problem only occurs on my system, but it seems a little odd because this was no issue with earlier builds.

Best,

Marcel

Luca answered 2017-01-20 15:51:09 UTC

Thank you for the feedback. Also you can remove the line with the workaround comment in the sample.

The ShowLoader property is hidden from the designer because it's not a design-time property. If you set it to true, the control will be blocked by an ajax loader. It's meant to be used at runtime.

The Scroll event is exposed again in the ScrollableControl class in the current build (not uploaded). It was hidden in the dev build from the base ControlBase class since it's not relevant at that level.

Adil Battal KAYA answered 2017-10-20 09:21:23 UTC

Hi,

Flowlayout on mobile devices are not working expected. I tried and tested again attached sample like as the screen cast and sample also is not working like on the screen cast. I found a something about fillweight on another topic but I couldn't understand how I can implement.

Thank you.

Adil Battal KAYA answered 2017-10-23 12:06:29 UTC

When I set fillweight to 1, customusercontrols are seen like that. When I adding controls on design time again same thing.

Flow layout doesn't fluid on mobile.

By the way, when do you publish the mobile controls?

Adil Battal KAYA answered 2017-10-30 07:48:53 UTC

My problem solved on this topic https://wisej.com/support/question/integration-with-android

Interestingly, when adding touchstart event to flowlayout and other components has flowing content then scrolling becomes smooth.

Thank you.

Navigation Menu

Repository navigation

Fast Scrolling in FlowLayoutPanel on tablet #477

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Fast Scrolling in FlowLayoutPanel on tablet #477

Description

Activity

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions