how to disable tab header click/selection

[afiqdoherty]

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]

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 

 

Sample: http://www.syncfusion.com/downloads/support/forum/131064/ze/Sample-1270082221.zip 

 

 

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]

 Thankss dear Keerthana,

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

-afiq-

[Keerthana Rajendran]

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.