Prevent tab change with condition

[Ivan Janjic]

Hello

Is there a way to prevent tab change? I tried in onItemActive with preventDefault and stopPropagation() but it doesn't seems it is possible.

Thanks,

Ivan

[Prince Oliver]

Hi Ivan, 

Thank you for contacting Syncfusion support. 

You can use the beforeActive event in the tab control and validate the active item to either continue or cancel the event. To cancel the event, you need to assign true to “event.cancel”. Kindly refer to the following code snippet. 

[HTML] 

<ej-tab id="tab" (beforeActive)="onbeforeActive($event)"> 

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 

</ej-tab> 

   

[TS] 

onbeforeActive(event) 

{ 

    if(event.activeIndex!=0) 

        event.cancel=true;    

} 

We have prepared a simple sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/136813/ze/TabSample-145975442  

Regards, 

Prince 

                                                                                                                                                   

[Ivan Janjic]

Thanks Prince, works like a charm.

Kind regards

Ivan

[Ilakkiya Baskar]

Hi Ivan, 

Most Welcome. Please get back to us if you require further assistance on this. We will be happy to assist you.  

Regards  

Ilakkiya