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

Client side validation before tab change

1 Answer 36 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Manish
Top achievements
Rank 2
Manish asked on 26 Nov 2018, 03:42 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 27 Nov 2018, 07:43 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TabStrip
Asked by
Manish
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Share this question
or