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.
Unfortunately, activation email could not send to your email. Please try again.

how to disable tab header click/selection

Thread ID:

Created:

Updated:

Platform:

Replies:

131064 Jun 18,2017 10:23 PM Jun 19,2017 11:49 PM ASP.NET Core 3
loading
Tags: Tab
afiqdoherty
Asked On June 18, 2017 10:23 PM

Hi,

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 :)

Keerthana Rajendran [Syncfusion]
Replied On June 19, 2017 07:29 AM

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) { 
        if(args.isInteraction==true) 
           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").text(""); 
                    $("#tab3_err").append("*Please enter passenger details"); 
                } 
                else { 
                    var tabobj = $("#wizardTab").data("ejTab"); 
                    tabobj.option({selectedItemIndex: 1 }) 
                    finaldetails(args); 
                } 
                break; 
            case "gobacktodetails": 
                var tabobj = $("#wizardTab").data("ejTab"); 
                tabobj.option({selectedItemIndex: 0 }) 
                break; 
 
        } 
 
    } 
    } 
 
 
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. 
 
 
Regards, 
Keerthana. 


afiqdoherty
Replied On June 19, 2017 11:30 PM

 Thankss dear Keerthana,

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

-afiq-

Keerthana Rajendran [Syncfusion]
Replied On June 19, 2017 11:49 PM

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  
 
Regards, 
Keerthana. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;