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

Problem with tabstrip onmouseout

5 Answers 79 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Kirk Thomas
Top achievements
Rank 1
Kirk Thomas asked on 03 Aug 2010, 02:22 PM
I'm having trouble using the code in one of the demos that allows for the tabstrip to show the child elements of the initial tab onmouseout.  Here's the code I'm using.

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager" runat="server" />
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script type="text/javascript" language="javascript">
        function SelectMyTab(sender, eventArgs) {
            var tab = eventArgs.get_tab();
            tab.select();
        }

        function UnSelectMyTab(e) {
            var tabStrip = $find('<%= RadTabStrip1.ClientID%>');
            if (!tabStrip) return;
            //Find the element which the mouse is over
            var destElement = e.relatedTarget || e.toElement;
            if ($telerik.isDescendant(tabStrip.get_element(), destElement))
                return;
            var initialTab = tabStrip.findTabByText(tabStrip.get_attributes().getAttribute("InitialTab"));
            initialTab.unselect();
            initialTab.selectParents();
        }
    </script>
    </telerik:RadCodeBlock>
    <div>
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" UnSelectChildren="True"
                                OnClientMouseOver="SelectMyTab"
                                OnClientMouseOut="UnSelectMyTab(event)"
                                ClickSelectedTab="True"
                                SelectedIndex="0"
                                AutoPostBack="True" >
            <Tabs>
                <telerik:RadTab runat="server" Text="Root RadTab1" Selected="true">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Child RadTab 1">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Child RadTab 2">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Root RadTab2">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="test">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="test2">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Root RadTab3">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>
    </form>
</body>



c# code:

protected void Page_Load(object sender, EventArgs e)
    {
        RadTabStrip1.Attributes["InitialTab"] = RadTabStrip1.InnermostSelectedTab.Text;
    }


Not sure what I'm missing but I get a javascript error that says "Object doesn't support this property or method".

- Kirk

5 Answers, 1 is accepted

Sort by
0
Veronica
Telerik team
answered on 03 Aug 2010, 03:35 PM
Hello Kirk Thomas,

To be able to work with the event in the UnSelectMyTab function you'll need to use this:

function UnselectMytab(sender, args)

   var e = args.get_domEvent();
   .....
}

The code will be the same after that.

Hope this helps.

Greetings,
Veronica Milcheva
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
0
Kirk Thomas
Top achievements
Rank 1
answered on 03 Aug 2010, 03:41 PM
Thanks for your help.  But now I get this error "Microsoft JScript runtime error: 'parentNode' is null or not an object".  Any ideas?

-Kirk
0
Kirk Thomas
Top achievements
Rank 1
answered on 04 Aug 2010, 04:32 PM
Anyone have an idea why I'm getting that javascript error?
0
Accepted
Veronica
Telerik team
answered on 06 Aug 2010, 12:02 PM
Hello Kirk Thomas,

Oh, I just noticed you are using this help topic.

Please ignore my suggestion in the previous post. You got the error : "Object doesn't support this property or method" because you were trying to subscribe to the client-side OnClientMouseOut event.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" UnSelectChildren="True"
                                OnClientMouseOver="SelectMyTab"
                                OnClientMouseOut="UnSelectMyTab(event)"
                                ClickSelectedTab="True"
                                SelectedIndex="0"
                                AutoPostBack="True" >

However in this case you need OnMouseOut.
 
Please take a look at the attached .zip file for the full code.

Hope this helps.

Kind regards,
Veronica Milcheva
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
0
Kirk Thomas
Top achievements
Rank 1
answered on 06 Aug 2010, 01:57 PM
Thank you so much, that was the issue.
Tags
TabStrip
Asked by
Kirk Thomas
Top achievements
Rank 1
Answers by
Veronica
Telerik team
Kirk Thomas
Top achievements
Rank 1
Share this question
or