Kendo angular scrollview - multiple images

[Akarsh]

Hi there,

  i have to implement a kendo angular scrollview in one of my project, which should display like multiple images in one page, instead of showing single image to slide, i want multiple images at a time in scrollview. I have attatched an image for reference

  

[Martin]

Hi Akarsh,

Thank you for the provided details.

By design, the built-in functionality of the Scrollview component is to scroll one item at the time in each direction, which is not very suitable to the described needs. However, some custom logic, utilizing the item template, and the itemChanged event might enable the developer to achieve the desired results.

As the developer has full control over the content of the template that will be rendered for each item, they can replace the data, rendered in the template based on the direction.

Here is a sample implementation of the described approach that might be used for reference when developing the custom logic and layout as per the specific scenario requirements:

https://stackblitz.com/edit/angular-w3mz2s-kmpop8?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Akarsh]

Thanks martin !

Actually my requirement,  its need to be move one item at time, instead of showing single image in screen, i need to show multiple image at a time and when clicks arrow one item needs to move.

 

[Martin]

Hi Akarsh,

The desired behavior can be achieved by modifying the logic suggested initially. The collection of items that is iterated in the markup needs to be updated by the developer in order to move only one image. Let me provide some more guidance.

For example, if the total array of items contains 12 images (allItems) and the first 3 are looped and shown on the page (visibleItems), then the total array will be sliced from index 0 (first image) to index 2 (third image). For convenience, these indexes can be defined as startIndex and endIndex.

When the user clicks an arrow, let's say the right arrow, then the startIndex and endIndex should be updated - startIndex += 1 and endIndex += 1. Slicing the allItems array with these indexes will hide the first image and add one more at the end. For left arrow =  startIdnex -=1 and endIndex -=1.

this.visibleItems = this.allItems.slice(this.startIndex, this.endIndex) 

and in the template of the ScrollView component:

 <kendo-scrollview
      [data]="allItems"  
      (itemChanged)="onChange($event)"
...
    >
      <ng-template let-item="item">
        <div *ngFor="let image of visibleItems" >
          <img [src]="image" width="150px" />
        </div>
      </ng-template>
    </kendo-scrollview>

Keep in mind that a couple of conditions should be added in order to work properly, like when to hide the arrows (e.g. if the startIndex = 0 to hide the left arrow and if endIndex -= 12 - hide the right arrow).

Also, the indexes should not fall out the boundaries of the allItems array (startIndex should not be negative, and the endIndex should not exceed 12).

It is worth mentioning that the suggestion relies on custom logic which changes the default behavior of the ScrollView component. Its purpose is to point the developer in the right direction of achieving the desired functionality and might need further modifications by the developer.

I hope this sheds some light on this case. Let me know if I can assist any further.

Regards,
Martin
Progress Telerik