We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

how to disable tab header click/selection


I need help on how to disable click/selection on tab header(e-tab-item). In my case, I need user to only click the "next" action button only instead of clicking the tab header to change tab.

Thanks :)

3 Replies

KR Keerthana Rajendran Syncfusion Team June 19, 2017 11:29 AM UTC

Hi Muhammad, 
Thank you for contacting Syncfusion support. 
We suggest you to disable the click during beforeItemActive event of tab using the below code 
<ej-tab id="wizardTab" show-close-button="true" before-active="beforeItemActive" width="700px"/> 
function beforeItemActive(args) { 
           args.cancel = true; 
We can use selectedItemIndex of ejTab to select a tab on  button click.  
Please refer to the below code 
function tabNavigations(args) { 
        switch (this._id) { 
            case "confirmtickets": 
                if ($("#pass_name1").val() == "") { 
                    $("#tab3_err").append("*Please enter passenger details"); 
                else { 
                    var tabobj = $("#wizardTab").data("ejTab"); 
                    tabobj.option({selectedItemIndex: 1 }) 
            case "gobacktodetails": 
                var tabobj = $("#wizardTab").data("ejTab"); 
                tabobj.option({selectedItemIndex: 0 }) 
We have prepared sample for your reference. Please refer to the below given link 
In the sample , we have included a button in first tab. The second tab item will be selected only when  the button in first tab item is clicked. In the same way in the second tab we have added a button to navigate to the previous tab. 

AF afiqdoherty June 20, 2017 03:30 AM UTC

 Thankss dear Keerthana,

the code works for my scenario. I've applied the "beforeItemActive" method . :D


KR Keerthana Rajendran Syncfusion Team June 20, 2017 03:49 AM UTC

Hi Muhammad,  
Thanks for your update. We are glad to hear that your issue has resolved, please get back to us if you require further assistance on this. We will be happy to assist you  

Live Chat Icon For mobile
Up arrow icon