Highlight the current item

4 posts, 0 answers
  1. TSE
    TSE avatar
    381 posts
    Member since:
    Sep 2008

    Posted 04 Apr 2011 Link to this post

    Hi forums,

    I have a working rotator (type CarousselButtons) with images (in colors).

    I was wondering. Is there any chance (by using the client API or the like), that I can only show the current item index image in colors and the others (not current item index) in say semi transparent...maybe apply the semi transparent-ness at the client side..

    Basically my need is to "highlight" the current index and to put the other indexes "away"..

    Hope this post is meaningful..


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Apr 2011 Link to this post

    Hello Henrick,

    I hope adding/removing some CSS to RadRotatorItem from client side will work for you. The following forum link (and code shown in forum), will help you to get started.
    Add CSS class on client click

  3. DevCraft R3 2016 release webinar banner
  4. TSE
    TSE avatar
    381 posts
    Member since:
    Sep 2008

    Posted 04 Apr 2011 Link to this post

    Hi Shinu,

    Yep, it surely points me in the right direction. Thanks..

    Although, I need an event (don't know if the item_showing event will fit there) where I can determine if the item is current or not and then apply a style accordingly... In other words: there will be no user intervention here...

    Will the item_showing fit my needs... I mean: Will item showing get called for each and every item in the rotator and not only the current index one?


  5. Marin Bratanov
    Marin Bratanov avatar
    3555 posts

    Posted 05 Apr 2011 Link to this post

    Hello Henrik,

    You can use the OnClientItemShown event to customize the items. This event is fired for the current item that is to be scrolled into view. In order to do that you need to:
    • attach to the event
    • remove the custom styling from all items as we do not want it to persist after the current item changes
    • apply the desired style

    You can also use the OnClientItemShowing event, depending on the desired visual effect. This event is fired before the items are rotated (and thus would not style the items on the initial load).

    You can also obtain a collection of the items and traverse it by their index (even relatively to the current index) and apply a more complex customization logic.

    For your convenience I prepared and attached a small page illustrating the approach (for the sake of simplicity I apply backgrounds).

    Please note that transparency is not equally supported in all browsers, especially IE.

    Kind regards,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items 
Back to Top