TabStrip validation

[Joel Reinford]

I am trying to use the Tabstrip/Multi-page as a wizard. I am trying to find a way to ignore the validation on the current tab if the user goes back.

How can I get the currently selected tab rather than the tab the user has just clicked? 

If I use OnClientTabSelecting like this:

function OnClientTabSelecting(sender, args)
{
var newTabIndex = sender.get_selectedTab().get_value();

...

I can get the tab the user has just clicked. How can I get the current tab (or pageview)?

[Paul]

Hello Joel,

Please refer to this help article for details on the matter.

Best wishes,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joel Reinford]

Paul, thanks for your answer. I did see that article in the documentation before I posted my question. However, I'm not sure if you understand my question clearly. If this is really the answer, it is incredibly lame.

Let me ask the question with more specific details and hope that I was not clear the first time. I am looking for a client-side solution to evaluating tab selection.

Assuming a tabstrip with three tabs. 

<telerik:RadTabStrip ID="radTabs" runat="server" 
    MultiPageID="radPages"     SelectedIndex="0"    
    OnClientTabSelecting="OnClientTabSelecting">

    <Tabs>

    <telerik:RadTab runat="server" Text="Step 1" Value="1" >
    </telerik:RadTab>

        <telerik:RadTab runat="server" Text="Step 2" Value="2">
        </telerik:RadTab>

        <telerik:RadTab runat="server" Text="Step 3" Value="3">
        </telerik:RadTab>

    </Tabs>
</telerik:RadTabStrip>

The user is currently looking at Step 3 (tabstrip has a selected index of 2 at this time). The user decides to look at Step 1 again (the first tab).

On the client-side, I can get the value of the tab that they have just clicked.

function OnClientTabSelecting(sender, args)
{
var newTabValue = sender.get_selectedTab().get_value();
// in this example, newTabValue would be 1
// how can I get the currentTabValue here which would be 3?
}

At this point I want to know that the user was looking at Step 3 when they clicked on the first tab.

Again, thanks for your assistance with this.

[Paul]

Hi Joel,

Actually, using your code snippet, on OnClientTabSelecting event you will get the value of the currently selected tab (the old tab), but not of the newly clicked tab. The value of the newly clicked tab can be found on OnClientTabSelected. Here's more detailed sample code that shows the proper work of the control.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <script type="text/javascript">
    function OnClientTabSelecting(sender, eventArgs)
    {
        alert(sender.get_selectedTab().get_value());
    }

    function OnClientTabSelected(sender, eventArgs)
    {
        alert(sender.get_selectedTab().get_value());
    }
    </script>

    <div>
        <telerik:RadTabStrip ID="radTabs" runat="server" MultiPageID="radPages" SelectedIndex="0" OnClientTabSelecting="OnClientTabSelecting" OnClientTabSelected="OnClientTabSelected">
            <Tabs>
                <telerik:RadTab runat="server" Text="Step 1" Value="1">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Step 2" Value="2">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Step 3" Value="3">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>
</form>

Even better, you can achieve both on OnClientTabSelecting event:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <script type="text/javascript">

    function OnClientTabSelecting(sender, eventArgs)
    {
        var newTabValue = eventArgs.get_tab().get_value();
        var oldTabValue = sender.get_selectedTab().get_value();
        alert("Old tab value is " + oldTabValue);
        alert("New tab value is " + newTabValue);
    }
    </script>

    <div>
        <telerik:RadTabStrip ID="radTabs" runat="server" MultiPageID="radPages" SelectedIndex="0" OnClientTabSelecting="OnClientTabSelecting">
            <Tabs>
                <telerik:RadTab runat="server" Text="Step 1" Value="1">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Step 2" Value="2">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Step 3" Value="3">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>
</form>

Sincerely yours,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joel Reinford]

That is exactly what I was looking for. Thanks for staying with me on the question, especially since I didn't even have it correct.