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: 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){};
}
|
