Client side validation before tab change

[Manish]

I need to check if hidden field value is 'Y' than it should change tab smoothly but if there is value 'N' in my hidden field than if shoudl open radconfirm before change tab. For example 

I have tabs in following format

 

1       2      3        4        5

Now when I select from 1 to 2 if should check if hidden filed value is 'N' than it should ask me to move on tab 2 in radconfirm if I select no than I should keep me on tab 1 and if I click on OK than it should redirect me on tab 2.

 

Please help me.

 

Thanks 

Manish

 

[Marin Bratanov]

Hello,

You can use the OnClientTabSelecting event and the tab's API to prevent the original selection, get the user confirmation and initiate the selection with code if the user confirms. Here's a small example I made for you:

<script>
    function OnClientTabSelecting(sender, args) {
        if (true              //replace with actual check whether you need to get confirmation
            && !sender.__customSelectionInProgress) {//used for the logic of the confirmation
            var targetTab = args.get_tab();
            args.set_cancel(true);//prevent the original action from taking place, we will initiate it with code if confirmed by the user
            var confirmCallback = function (confirmation) {
                if (confirmation) {
                    //use a flag to prevent an endless loop in the event handler
                    sender.__customSelectionInProgress = true;
                    targetTab.set_selected(true);//select the tab now that we have confirmation from the user
                    sender.__customSelectionInProgress = null;
                }
            }
            var msg = String.format("are you sure you want to switch from {0} to {1}?", sender.get_selectedTab().get_text(), targetTab.get_text());
            radconfirm(msg, confirmCallback);
        }
    }
</script>
<telerik:RadWindowManager runat="server" ID="rwm1" RenderMode="Lightweight"></telerik:RadWindowManager>
<telerik:RadTabStrip runat="server" ID="rts1" RenderMode="Lightweight" OnClientTabSelecting="OnClientTabSelecting">
    <Tabs>
        <telerik:RadTab Text="one" Selected="true"></telerik:RadTab>
        <telerik:RadTab Text="two"></telerik:RadTab>
        <telerik:RadTab Text="three"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

Regards,
Marin Bratanov
Progress Telerik