This is a migrated thread and some comments may be shown as answers.

Show / Hide Scroll Hints at Runtime

5 Answers 118 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
axel
Top achievements
Rank 1
axel asked on 02 Jul 2020, 11:53 AM

Hello everybody,

ref: Kendo Mobile Listview (Scroller): visibleScrollHints

Is it somehow possible to change the visibility of the y-scrollbar at runtime? 

 

Thanks for your help

axel

5 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 06 Jul 2020, 07:10 AM

Hello Axel,

The targeted functionality can be implemented by adding a width property to the DOM element inside the scroller and then refresh the scroller using the animatedScrollTo method.

This example demonstrates how the targeted functionality can be realized. To simulate runtime change, I've used the setTimeout function as follows:

    setTimeout(function(){
      	      $("#scrollerContent").css("width", "400px");
              $("#scroller").data("kendoMobileScroller").animatedScrollTo(0, 0);
    },2000)

With the above, two seconds after the page is initialized the horizontal scroller will appear. 

I hope the above will help you implement the targeted functionality in your application.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
axel
Top achievements
Rank 1
answered on 07 Jul 2020, 08:28 AM

Hi Petar,

I am sorry that I have expressed myself so imprecisely.
I want the end user to determine whether the scroll bars are showing continuously or only when scrolling.
In other words, I need the configuration flag "visibleScrollHints" as a method.

Thank you

 

0
Petar
Telerik team
answered on 09 Jul 2020, 06:07 AM

Hi Axel,

I am afraid that there is no such method that can control the visibleScrollHints configuration dynamically.

What you can try is to control the visibility of the horizontal scrollbar using a snippet similar to the below:

$(".km-touch-scrollbar.km-horizontal-scrollbar").css("visibility", "hidden");

The marked in yellow code selects the horizontal scrollbar. Based on the business logic of your application, the above can be used to hide/show the horizontal bar.

Regards,
Petar
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
axel
Top achievements
Rank 1
answered on 09 Jul 2020, 11:08 AM

Hello Petar,

For the sake of completeness

Unfortunately, this only works once. After another scrolling it is visible again.

It would work if there was some kind of scroller event "onAnimationEnd" where you set the visibility back to "hidden".

Thanks for your help

0
Petar
Telerik team
answered on 13 Jul 2020, 09:04 AM

Hello Axel,

I am afraid that the Scroller API doesn't have such an event.

I cannot suggest another workaround you can try to implement the targeted functionality. 

Regards,
Petar
Progress Telerik

Tags
ListView (Mobile)
Asked by
axel
Top achievements
Rank 1
Answers by
Petar
Telerik team
axel
Top achievements
Rank 1
Share this question
or