Add CSS class on client click?

7 posts, 1 answers
  1. Jay
    Jay avatar
    8 posts
    Member since:
    Jul 2008

    Posted 17 Aug 2008 Link to this post

    I have an image gallery setup using a Rotator control.  I'd like to add/remove a "seleccted" CSS class to highlight the currently selected image in my strip of thumbnails.

    The documentation shows that I can add an OnClientItemClicked JavaScript event which I should be able to use to handle this.  I need to get the currently clicked item which should be something like args.get_item().  Is there a list somewhere of properties and methods of the args and sender items?  The documentation seems to only show the event names.

    Any help would be appreciated.

    Thanks
  2. Answer
    Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 20 Aug 2008 Link to this post

    Hi Jay,

    Here is a small sample that shows the approach that we recommend - I hope it will help:

    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
       .rotatorItemColor 
        { 
            background-color:red; 
        } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <telerik:RadScriptManager ID="ScriptManager1" runat="server"
            </telerik:RadScriptManager> 
             
            <script type="text/javascript"
            var currentItem; 
            function itemClicked_handler(sender, args) 
            { 
                currentItem = args.get_item(); 
                currentItem.addCssClass("rotatorItemColor"); 
            } 
             
            function itemShowing_handler(sender,args) 
            { 
                currentItem.removeCssClass("rotatorItemColor"); 
            } 
             
            </script> 
             
            <telerik:RadRotator  
                OnClientItemClicked="itemClicked_handler"  
                OnClientItemShowing="itemShowing_handler" 
                ID="RadRotator1"  
                Width="305px"  
                Height="114px"  
                RotatorType="ButtonsOver" 
                ScrollDirection="Down, Up"  
                DataSourceID="AccessDataSource1"  
                runat="server" 
                ItemWidth="305px" 
                ItemHeight="74px" 
                > 
                <ItemTemplate> 
     
                    <%# DataBinder.Eval(Container.DataItem, "ProductName")%> 
     
                </ItemTemplate> 
            </telerik:RadRotator> 
            <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb" 
                SelectCommand="SELECT [ProductName], [UnitPrice] FROM [Alphabetical List of Products]"
            </asp:AccessDataSource> 
        </form> 
    </body> 
    </html> 



    Sincerely yours,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jay
    Jay avatar
    8 posts
    Member since:
    Jul 2008

    Posted 20 Aug 2008 Link to this post

    I'm using my Rotator control as navigation for an image gallery so I simplified your example into just using one event handler to remove the CSS class from the current and then add it to the new one.

    <script type="text/javascript"
        var currentItem; 
        function itemClicked_handler(sender, args) { 
            if (currentItem) currentItem.removeCssClass("selected");   
            currentItem = args.get_item(); 
            currentItem.addCssClass("selected");   
        }   
    </script> 


    Thanks so much for your help.
  5. Stephen
    Stephen avatar
    70 posts
    Member since:
    Mar 2008

    Posted 27 Mar 2009 Link to this post

    Is there a way to do this server side through the ItemClick event?  I'd like to access the html content within the ItemTemplate and place a border around it.

    Any help on this would be greatly appreciated.


    Thanks,
    Stephen

  6. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 31 Mar 2009 Link to this post

    Hi Stephen,

    I have implemented a demo project with the desired functionality and have attached it to this thread.

    I hope this helps.

    All the best,
    Fiko
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  7. Jaime
    Jaime avatar
    12 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    How can I use this same sample but on the client side using javascript to set CssClass values when the left or right buttons are clicked? I'm using custom buttons and would like to set the rrdisabled property when a user clicks an arrow and the last items has been reached.

    Thanks,

    Jaime
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Feb 2013 Link to this post

    Hello Jaime

    The WrapFrames="false" setting  will cause the RadRotator control to stop when it reaches the last item.
    aspx:
    <telerik:RadRotator ID="RadRotator1" runat="server" WrapFrames="false">
    </telerik:RadRotator>
    Thanks
    Princy
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017