Prevent user's navigation to a different tab in Ajax toolkit's TabContainer control

Introduction

Today I was working with the Tab Container control from Ajax tool kit and I had this requirement of preventing the user from navigating off to a different tab without completing the required fields on the active tab he was in. There is no direct feature in the toolkit that provides this feature. Googling around did not help me much. So, I sat down to write it. And here is code that I came up with that helps us to achive this feature. Not sure if this is the right way, but it does the job.

Background

Using Javascript to add functionality to the Ajax toolkit TabControl to prevent user from navigating off to a different tab.

The code

Add the below code to your page and call the necessary validation function at the place where I have called doYourValidations();. It should return true on success and false on a failure.

Code:

var ref_set_activeTab = null;
    var canChangeTab = false;
    function PanelClicked(sender, e)
    {
        var ctrl = sender.get_owner();
        if(ref_set_activeTab == null)
            ref_set_activeTab =  ctrl.set_activeTab;
        canChangeTab = doYourValidations();
        if(canChangeTab)
            ctrl.set_activeTab = ref_set_activeTab;
        else
            ctrl.set_activeTab = function(obj){};
        
    }

 

Re: Prevent user's navigation to a different tab in Ajax toolkit's TabContainer contr

Nice article to read.

 

Re: Prevent user's navigation to a different tab in Ajax toolkit's TabContainer contr

Thanks for the info, I appreciate it.