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

Selecting tab item by code generates bad behavior in tab control

Hi,
I have a tab control in my page and in the second tab I have a button which after some actions, i want to select the next tab item but, when i click the button, the first tab shows up and every time i click on other item tab, the first item tab shows up.

My code for the tab:

@using Syncfusion.EJ2;
<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        <div id="tabContrato">
            <div class="e-tab-header">
                <div>Titular </div>
                <div>Condiciones </div>
                <div>Beneficiarios </div>
            </div>
            <div class="e-content">
                <div>
                    @Html.Partial("_Persona")
                </div>
                <div>
                    @Html.Partial("_Contrato")
                </div>
                <div>
                    @Html.Partial("_Beneficiarios")
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .e-content .e-item {
        font-size: 12px;
        padding: 10px;
        text-align: justify;
    }
</style>
@section Scripts {
    <script type="text/javascript">
        var tabObj = new ej.navigations.Tab({
            heightAdjustMode: "Auto"
        });
        tabObj.appendTo('#tabContrato');
    </script>

And in the second item of the tab, that is to say in the "_Contrato" partial view i have this script in a button:
var objTab = new ej.navigations.Tab();
objTab.appendTo("#tabContrato");
objTab.select(2);  // I am assuming that items array begins with 0 index, so I want to activate the third item tab, that is the _Beneficiarios partial view.

I am using version 16.4.0.42

Thanks for your help.

Kind regards,
Juan J.



1 Reply

Karthigeyan Krishnamurthi March 15, 2019 09:13 AM UTC

Hi  Juan,   
   
Thanks for contacting Syncfusion support. 
 
We suspect that the instance of the Tab control is taken wrongly which could be the cause and kindly use the below code example.  
 
   
  function Onclick() { 
 
        var objTab = document.getElementById("tabContrato").ej2_instances[0]; 
        objTab.select(2); 
 
    } 
 
 
 
We have also provided a demo sample for your reference. 
 
 
Note: In this sample, by click the button in one Tab navigates to the other Tab 
 
 
Based on your codes, we suspect that you want to use our Tab like wizard structure. Hence we request you to follow the below links for more information about Tab wizard structure. 
 
 
 
 
Regards, 
Karthi 


Loader.
Live Chat Icon For mobile
Up arrow icon