Welcome Guest Search | Active Topics | Sign In | Register

TabStrip SelectedIndex problem Options
Simon
Posted: Monday, September 5, 2011 4:31:12 AM
Rank: Member
Groups: Member

Joined: 8/19/2011
Posts: 15
I have a TabStrip, what I need to do is know which tab is currently selected, I am trying to use the SelectedIndex property, but seem to be getting some strange results, I have attached a sample page so you can see:
If you run this and press the first Tab, the SelectedIndex is 0, great, then press the second tab, the SelectedIndex is still 0, if you press the same tab again the SelectedIndex is 1 which is what I would have expected the 1st time I pressed the tab, then press the 3rd Tab, the SelectedIndex is still 1 and not 2, then if you press the 2nd tab again the SelectedIndex is 2, not 1.

I really need to know which tab is the selected tab, if there is a way to obtain the ID or text instead of using the SelectedIndex which is not doing what I expected, please let me know, this is driving me mad.

Thanks
Simon.

<--------------------------------- Test Page --------------------------------------------------->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:TabStrip ID="TabStrip1" runat="server" ControlSkinID="None"
DesignOptions-BackColor="239, 235, 222" MultiPageID="MultiPage1"
SelectedIndex="0" ClientSideOnItemClick="TabSwitch">
<LookItems>
<eo:TabItem Image-BackgroundRepeat="RepeatX" Image-Mode="TextBackground"
Image-SelectedUrl="00010205" Image-Url="00010202" ItemID="_Default"
LeftIcon-SelectedUrl="00010204" LeftIcon-Url="00010201"
RightIcon-SelectedUrl="00010206" RightIcon-Url="00010203">
<SubGroup OverlapDepth="8"
Style-CssText="font-family: tahoma; font-size: 8pt; background-image: url(00010200); background-repeat: repeat-x; cursor: hand;">
</SubGroup>
</eo:TabItem>
</LookItems>
<TopGroup>
<Items>
<eo:TabItem Selected="True" Text-Html="Themes">
</eo:TabItem>
<eo:TabItem Text-Html="Desktop">
</eo:TabItem>
<eo:TabItem Text-Html="Screen Saver">
</eo:TabItem>
</Items>
</TopGroup>
</eo:TabStrip>
<eo:MultiPage ID="MultiPage1" runat="server" Height='180px' Width='100%'>
<eo:PageView ID="PageView1" runat="server" Width="100%">
Page 1
</eo:PageView>
<eo:PageView ID="PageView2" runat="server" Width="100%">
Page 2
</eo:PageView>
<eo:PageView ID="PageView3" runat="server" Width="100%">
Page 3
</eo:PageView>
</eo:MultiPage>
</div>
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="159px"
Width="946px"></asp:TextBox>
</form>

<script language="javascript" type="text/javascript">
function TabSwitch() {
var list = document.getElementById('<%=TextBox1.ClientID %>');
var TabList = eo_GetObject('TabStrip1');

list.value += "SelectedIndex = " + TabList.getSelectedIndex() + '\n';
}

</script>


</body>
</html>
eo_support
Posted: Monday, September 5, 2011 8:40:56 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Please use setTimeout to delay your code. It will be something like this:

Code: JavaScript
function TabSwitch() {
    setTimeout(function()
    {
        var list = document.getElementById('<%=TextBox1.ClientID %>');
        var TabList = eo_GetObject('TabStrip1');

        list.value += "SelectedIndex = " + 
            TabList.getSelectedIndex() + '\n';
    }, 10);
}


This is necessary because when ClientSideOnItemClick is fired, the selected item index has not been updated yet (in order to allow you to cancel tab switching).

Thanks



You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.