Search code examples
repeaterkenticodataitem

2 basic repeaters that communicate the same DataItemIndex


I have the same data source for 2 basic repeaters, and in the first repeater I have is over items of the data source, showing only the title and date of the items, I want whenever a user slide to a certain item, the text field of this item will be shown in the second repeater. how can I know the selected item index of first repeater and access it in the second repeater?

here's a picture of the design


Solution


  • In Kentico, you can use <%# DataItemIndex %> to render current item index. So in your repeater template, you can render specific classes for your items.
    For example, 1st repeater item template:

    <div class='slide-top-item slide-<%# DataItemIndex %>'>...</div>
    

    2nd repeater item template:

    <div class='slide-content-item slide-<%# DataItemIndex %>'>...</div>
    

    And when a user slides to a certain item, you can change text using javascript by finding an element with specific CSS class.