Custom view does not scroll

Discontinued products Scheduler for Mobile and Touch devices
#1

I created an additional view with several fields

			scheduler.config.views.push({
				id:"mycustomView",
				rows:[
					{
						view:"toolbar",
						css:"dhx_topbar",
						elements:[
							{
								view:'button', 
								inputWidth: 100,
								css:"cancel",
								label: scheduler.locale.labels.icon_back,
								click: "$$('scheduler').$$('views').back()"
							}
						]
					},
					{view:"label",		label:"Select the values below",	id:'info' },
					{view:"label",		label:"Value One",	id:'valueonelabel' },
					{view:"select",		label:"ValueOne",	id:'valueone', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
					{view:"label",		label:"Value Two",	id:'valuetwolabel' },
					{view:"select",		label:"ValueTwo",	id:'valuetwo', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
					{view:"label",		label:"Value Three",	id:'valuethreelabel' },
					{view:"select",		label:"ValueThree",	id:'valuethree', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
					{view:"label",		label:"Value Four",	id:'valuefourlabel' },
					{view:"select",		label:"ValueFour",	id:'valuefour', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
					{view:"label",		label:"Value Five",	id:'valuefivelabel' },
					{view:"select",		label:"ValueFive",	id:'valuefive', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
				]
			});

It needs to be able to scroll, and I thought this would happen automatically, but it doesn’t.

Is there a setting I have missed off that enables scrolling?

#2

You can wrap toolbar ( or any other set of components ) in scrollview if necessary
docs.dhtmlx.com/touch/doku.php?id=scrollview

#3

If I attempt to wrap the input elements in a scrollview, I get an error

Uncaught TypeError: Cannot call method ‘$getSize’ of undefined

and that seems to be coming from

dhx.protoUI.$getSize

Is there something else that I need to adding to the scheduler, like an additional library? UI library?

#4

I figured out that I had an error in my code that was causing the above error.

In case it helps anyone, here’s how I modified my code to get it to work

			scheduler.config.views.push({
				id:"mycustomView",
				rows:[
					{
						view:"toolbar",
						css:"dhx_topbar",
						elements:[
							{
								view:'button', 
								inputWidth: 100,
								css:"cancel",
								label: scheduler.locale.labels.icon_back,
								click: "$$('scheduler').$$('views').back()"
							}
						]
					},

					{
						view: 'scrollview',
						id: 'settingscontent',
						scroll: 'y',
						content:{
							rows:[



					{view:"label",		label:"Select the values below",	id:'info' },
					{view:"label",		label:"Value One",	id:'valueonelabel' },
					{view:"select",		label:"ValueOne",	id:'valueone', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
					{view:"label",		label:"Value Two",	id:'valuetwolabel' },
					{view:"select",		label:"ValueTwo",	id:'valuetwo', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
					{view:"label",		label:"Value Three",	id:'valuethreelabel' },
					{view:"select",		label:"ValueThree",	id:'valuethree', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
					{view:"label",		label:"Value Four",	id:'valuefourlabel' },
					{view:"select",		label:"ValueFour",	id:'valuefour', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] },
					{view:"label",		label:"Value Five",	id:'valuefivelabel' },
					{view:"select",		label:"ValueFive",	id:'valuefive', options:[{ value:"0", label:"All" },{ value:"1", label:"Another Value" },{ value:"2", label:"Second Value" }] }

							]
						}
					}



				]
			});
#5

There must be some configuration option that I have missed in doing this, because, although I have the scrolling working ok now, I have discovered an additional problem.

The page displays correctly and scrolls correctly when intially displayed, but, if I switch orientation on my phone, the toolbar displays, but the scrollview is blank.

As soon as I touch the screen, and make a swipe gesture for scroll, then the screen displays the correct content.

Do you have any ideas what I could be doing worng to cause this?

#6

An update about this

I have discovered that if I make a change of orientation before the page has been scrolled, then the page is correctly displayed after the orientation change.

BUT, if the page has been scrolled at all, then it displays blank after the orientation change, and a touch on the screen then makes it redisplay correctly.

#7

Is there anything I can do to fix this error on orientation change?

#8

Problem confirmed. We will try to provide fix in few days. Meanwhile try to add the code like next

dhx.attachEvent("onRotate", function(){ $$("id of scrollview").scrollTo(0,0); });

It must work as temporary workaround

#9

If you can get a fix in a few days that will be fantastic.

I’m still in development mode, so I can live with this issue if I know it’s going to be resolved by the time I will be going live.

Thanks for your help.