This is a migrated thread and some comments may be shown as answers.

Jquery is not working when using with RadTabStrip

1 Answer 144 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Vincent asked on 14 Jul 2008, 03:39 AM

Hi

I have a RadTabStrip control on the page, inside page, I just jquery to add css
to highlight several fields, but it seems not working at all. here is my code
snippet

JS code:

        $(document).ready(function() {
            $("#<%=btnSaveDefaultReply.ClientID%>").hover(
              function () {
                $(".btnSaveDefaultReply").addClass("actionhighlight");
              },
              function () {
                $(".btnSaveDefaultReply").removeClass("actionhighlight");
              }
            )
        });

Html code:

            <telerik:RadPageView ID="pMisc" runat="server">
                <br />
                <table border="0" cellpadding="5" cellspacing="5" width="450px">
                    <tr>
                        <td colspan="3">
                            <strong>Default Reply Name and Email</strong>
                        </td>
                    </tr>
                    <tr class="dd btnSaveDefaultReply" id="test">
                        <td class="label">
                            Default Reply Email:
                        </td>

.......

1 Answer, 1 is accepted

answered on 14 Jul 2008, 03:27 PM

Hello Vincent,

I was able to get your JQuery script to work properly inside the RadPageViews of a RadTabStrip. Could you possibly have a problem with your CSS? Either way, here is the code I got working:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadTabStrip.aspx.cs" Inherits="RadTabStrip" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <script src="JavaScript/jquery-1.2.6.js" type="text/javascript" ></script> 
        
                <style type="text/css"> 
        
                    .btnSaveDefaultReply 
        
                    { 
        
                        /* Insert CSS here */ 
        
                    } 
        
                    .actionhighlight 
        
                    { 
        
                        background-color: Yellow; 
        
                    } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 
        
                        <script type="text/javascript"> 
        
                             $(document).ready(function() { 
        
                                $("#<%=btnSaveDefaultReply.ClientID%>").hover( 
        
                                  function () { 
        
                                    $(".btnSaveDefaultReply").addClass("actionhighlight"); 
        
                                  }, 
        
                                  function () { 
        
                                    $(".btnSaveDefaultReply").removeClass("actionhighlight"); 
        
                                  } 
        
                                )            
        
                            }); 
        
                        </script> 
        
                    </telerik:RadScriptBlock> 
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"> 
        
                        <Tabs> 
        
                            <telerik:RadTab PageViewID="RadPageView1" runat="server" Text="RadTab One" /> 
        
                            <telerik:RadTab PageViewID="RadPageView2" runat="server" Text="RadTab Two" /> 
        
                        </Tabs> 
        
                    </telerik:RadTabStrip> 
        
                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server"> 
        
                        <telerik:RadPageView ID="RadPageView1" runat="server" Width="100%"> 
        
                            <table border="0" cellpadding="5" cellspacing="5" width="450px"> 
        
                                <tr> 
        
                                    <td colspan="3"> 
        
                                        <strong>Default Reply Name and Email</strong> 
        
                                    </td> 
        
                                </tr> 
        
                                <tr class="dd btnSaveDefaultReply" id="test"> 
        
                                    <td class="label"> 
        
                                        Default Reply Email: 
        
                                    </td> 
        
                                    <td> 
        
                                        <telerik:RadTextBox ID="RadTextBox1" runat="server" /> 
        
                                    </td> 
        
                                    <td> 
        
                                        <asp:Button ID="btnSaveDefaultReply" runat="server" 
        
                                            Text="Click Me" /> 
        
                                    </td> 
        
                                </tr> 
        
                            </table> 
        
                        </telerik:RadPageView> 
        
                        <telerik:RadPageView ID="RadPageView2" runat="server" Width="100%"> 
        
                            ... 
        
                        </telerik:RadPageView> 
        
                    </telerik:RadMultiPage> 
        
                </form> 
        
            </body> 
        
            </html>

I hope this helps. Please let me know if you continue to have trouble.

Sincerely,
Kevin Babcock