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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Selecting tab item by code generates bad behavior in tab control

Thread ID:

Created:

Updated:

Platform:

Replies:

143339 Mar 14,2019 04:52 PM UTC Mar 15,2019 09:13 AM UTC JavaScript - EJ 2 1
loading
Tags: Tab
Juan José
Asked On March 14, 2019 04:52 PM UTC

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.



Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;