Not able to get Unique Image id while using Telerik Rad Rota

Posted by Community Admin on 04-Aug-2018 17:43

Not able to get Unique Image id while using Telerik Rad Rotator

All Replies

Posted by Community Admin on 12-Apr-2013 00:00

I am using  a custom control and created a Telerik RadRotator in it. I have binded images in the RadRotator. I want to call a javascript function based on which image is clicked in the slider. I get the source of the image in the function. Currently when the function is called its only able to get it for the first item. Nothing happens for the rest of them. 
Can someone help me on this.

Below is the code :

<telerik:RadRotator ID="VideosCarousel" runat="server" Width="94%" Height="180" RotatorType="Buttons"
            WrapFrames="true" CssClass="videoscarousel">
            <ItemTemplate>
                <a href="#section3" id="videolink">
                    <img src="<%# Eval("VideoUrl") %>" alt="videoImage" id="videoimage" />
                </a>
            </ItemTemplate>
        </telerik:RadRotator>

<script type="text/javascript">
    $(document).ready(function ()
        $("#videolink").click(function ()
            alert("Handler for .click() called.");
        );
    );
</script>

Posted by Community Admin on 16-Apr-2013 00:00

Hello Prateek,

The problem is coming from the fact that you are setting an Id on the <a> tag instead of class for example. Therefore in the output of the browser all <a> tags in the Rotator control will be with the same ID and as you might know the ID should be unique identifier. This is why only one of the items works with the JS function.

Try changing the following lines:

<ItemTemplate>
               <a href="#section3" id="videolink">
                   <img src="<%# Eval("VideoUrl") %>" alt="videoImage" id="videoimage" />
               </a>
           </ItemTemplate>

like so:
<ItemTemplate>
                <a href="#section3" class="videolink">
                    <img src="<%# Eval("VideoUrl") %>" alt="videoImage" class="videoimage" />
                </a>
            </ItemTemplate>

In order to not have duplicating IDs on the output.

Kind regards,
Pavel Benov
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 17-Apr-2013 00:00

Thanks a lot for the reply!

This thread is closed