Scrollview Responsive

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 11 Jul 2023 15:09 by ADMIN

n/a

Created on: 30 Apr 2020 12:08

Category: ScrollView

Type: Feature Request

Scrollview Responsive

Hi,

I am using scrollview and I want to make it resposive, i.e. show less amount of items in the scrollview when the screen size is reduced.

For instance, currently I am showing 5 items in scrollview's active view. Now if a user access it via a different device with a smaller screen size, I want to show only 1 or 2 or item (depends on screen size) in the active view. How can I achive this with scroll view?

Secondly, I am showing 5 active items in the view, now when the user clicks the scrollview's next or previous button, I want scrollview to get just one more item into the active view, depending on user selection.

Regards,

Andy

4 comments

ADMIN

Martin

Posted on: 11 Jul 2023 15:09

Hello Andy,

We are declining this request due to low interest and demand. If it turns out to be popular in the future, we will reconsider the status.

Regards,
Martin
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.

ADMIN

Svet

Posted on: 04 May 2020 11:59

Hi Andy,

Thank you for the provided example and additional details.

Indeed, the requirement is now clear. I understand that this may be disappointing, but currently there isn't such built-in option of the Kendo UI for Angular ScrollView component that would allow to achieve the required behavior at the moment. There isn't also a fairly simple workaround that I could suggest to achieve the responsive behavior of the demonstrated Owl Carousel:

https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

Thus I converted this this ticket to be a public feature request item so that it can be voted for by our clients:

https://feedback.telerik.com/kendo-angular-ui/1464144-scrollview-responsive

That will allow us to track the demand for such functionality and will help us to plan our future development plans accordingly.

Thank you for the provided feedback. Indeed, providing such functionality out-of-the-box would be a valuable addition to the ScrollView component. However at the moment I am unable to provide an estimate as to when it could be released as the feature hasn't been added to our future plans. Please let us know in case we can provide any further information on this or any other Kendo UI for Angular related topic.

Regards,
Svetlin
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.

n/a

Posted on: 02 May 2020 11:02

Hi Svetlin,

I didn't mean to confuse you, I'll try to further simplify my query.

By default, scrollview shows just 1 item (activeItem) in it and you can click next/previous icons to fetch next/previous item, which then become the next activeItem.

Now, what I want to achieve with scrollview is following.

1 - Show 5 items in the scrollview simultaneously (example: https://owlcarousel2.github.io/OwlCarousel2/, this one has 3 in its demo section)

2 - When next/previous is clicked, rather than fetching next 5 item to be shown on the screen, fetch next 1 item. Consider following:

Scrollview - Inital State:

< 1 2 3 4 5 >

Scrollview - When next icon is clicked:

< 2 3 4 5 6 >

3 - Refering to the example provided in point one, currently 3 items are shown in the carousel, however if you resize the window, it adjusts accordingly. For instance, if you decrease the window size, the items shown gradually become 3 to 2 and then eventually 1.

Hope you understand my requirement better now.

Regards,

Andy

ADMIN

Svet

Posted on: 01 May 2020 06:00

Hi Andy,

I am not sure that I understand the requirements. Let me provide some suggestions and you could then write back in case I missed something.

What confuses me is that the ScrollView doesn't provide an active view. It has an active item that can be controlled as demonstrated on the following article:

https://www.telerik.com/kendo-angular-ui/components/scrollview/active-items/

The ScrollView has a [data] property which accepts an array of items that will be used for the data source.

About the desired responsive behavior, what could be done is to use some custom logic based on JavaScript to listen for the generic window.resize and if it becomes too small the data source can be updated to contain just a few items. Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-1rzfgk?file=app/app.component.ts

The essential part is the custom logic within ngAfterViewInit:

  ngAfterViewInit(){
    window.addEventListener('resize', (e)=>{
      console.log(e.target.innerWidth);
      if(e.target.innerWidth > 500){
        this.items = [
            { title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
            { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
            { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
          ];
      }else{
        this.items = [
            { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
          ];
      }
    })
  }

About your second question, there aren't exposed built-in events for clicking the arrows. But clicking them can be handled using some custom JavaScript. Then any further required logic can be used. Please check the following example:

https://stackblitz.com/edit/angular-1rzfgk-9o6kkk?file=app/app.component.ts

Indeed, both examples are based on some custom logic that isn't based on built-in features of the ScrollView and should be used based on the developer own discretion. But I hope it points you in the right direction of achieving the requirement.

Please check the provided information and let me know in case I am missing something about the requirement or if further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik