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

urstop's Avatar author of Prevent user's navigation to a different tab in Ajax toolkit's TabContainer control
This is an article on Prevent user's navigation to a different tab in Ajax toolkit's TabContainer control in ASP.

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: Javascript
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){};
       
    }
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Nominate this article for Article of the month - Nov 2009
0
technica's Avatar
CoderByNature
Nice article to read.
0
rasd123's Avatar
Banned
Thanks for the info, I appreciate it.
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Vote this article for Article of the month - November 2009