Infragistics WebTab control is very versatile and offers rich server- and client-side model. Among client-side events are

• SelectedIndexChanged – fires after user has changed the tab to provide ways to interact with newly selected tab
• SelectedIndexChanging – fires before user has changed the tab to provide ways to interact with currently selected tab and to give user a chance to cancel change.

Both work fine if user manually changes tabs by clicking on tab headers, but call to client-side set_selectedIndex() function (which changes tabs programmaticaly) only fires SelectedIndexChanged, skipping SelectedIndexChanging altogether. But there’s a way to make it work.

Here’s a basic stub for SelectedIndexChanging event handler:

function xMyTab_SelectedIndexChanging(sender, eventArgs) {

   if (/* some condition is not met */)  {
      alert('You cannot switch tabs at this time');
      eventArgs.set_cancel(true);
      return false;
   }
   
   /* Perform some processing on the current tab before switching */ 
   
}

Lines Lines 3-7 can perform some validation (required text not entered, process is still going on) and if validation is not passed – cancel the tab selection (Line 5: eventArgs.set_cancel(true);). If validation is passed – we can continue processing current tab before switch to the new one.

Again, this works fine when user manually changes tabs by clicking on them. But let’s say you have a custom function:

function myTabChange(i_iTabIndex) {
   var oTab = $find('xMyTab');
   oTab.set_selectedIndex(i_iTabIndex)
}

It accepts Tab Index and selects it by calling set_selectedIndex function of the Tab control. It works fine, but unfortunately SelectedIndexChanging event is not firing, so there’s no way to perform those validations or pre-processing. But there’s a way to implement it (and avoid copy-pasting lots of code). Let’s modify our event handler stub just a little:

function xMyTab_SelectedIndexChanging(sender, eventArgs) {

   if (/* some condition is not met */)  {
      alert('You cannot switch tabs at this time');
      if (eventArgs) eventArgs.set_cancel(true);
      return false;
   }
   
   /* Perform some processing on the current tab before switching */ 
   
   return true

}

We added a line to call eventArgs.set_cancel only if eventArgs argument is passed to the event handler function; and the last line that returns true after successful validation and processing the code. With this change we can modify our custom function like this:

function myTabChange(i_iTabIndex) {
   var oTab = $find('xMyTab');
   if (xMyTab_SelectedIndexChanging(oTab) == false) return;
   oTab.set_selectedIndex(i_iTabIndex)
}

Line 3 that we added calls the same event handler function, but without passing eventArgs parameter. Our modified handler detects this and if its validation fails returns false. This will effectively cancel tab change in our custom function. After successful validation true will be returned and the tab change will proceed.

If the event handler is called normally – via user click – eventArgs parameter will be passed and handler will perform as before.