Problem opening a tab using a method

[Fabiano Melo]

Hi

I'm setting up an application screen that has some tabs. However, I need to click on a button on the first tab, it opens the second tab and I'm not sure how to do it. I looked in the documentation and found something like a wizard, but it didn't work. I Tried:

@ViewChild ('tab', {static: false}) tab: TabComponent;

onEnableTabs () {

     this.tab.enableTab (2, true);

     this.tab.select (2);

   }

I changed this index number to 0, 1 and 2 and nothing.

I also removed this.tab.enableTab (2, true), and nothing.

I do not know how to do.

[Satheesh Kumar Balasubramanian]

Hi Fabiano, 

  

Greetings from Syncfusion Support. 

  

We have validated your reported query "Problem opening a tab using a method" and prepared sample based on your requirement. 

  

Code snippet:  

    public btnClicked(e: any): void { 

        switch (e.target.id) { 

            case 'searchNext': 

                /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */ 

                if (!isNOU(this.startPoint.value) && !isNOU(this.endPoint.value) && 

                    !isNOU(this.ticketType.value) && !isNOU(this.journeyDate.value)) { 

                    if (!isNOU(this.startPoint.value) && this.startPoint.value == this.endPoint.value) { 

                        document.getElementById('err1').innerText = '* Arrival point cannot be same as Departure'; 

                    } else { 

                        this.tab.enableTab(1, true);   /* Enables the Second tab item*/ 

                        this.tab.enableTab(0, false);  /* Disables the first tab item*/ 

                        this.filterTrains(e); 

                        document.getElementById('err1').innerText = ''; 

                        document.getElementById('err2').innerText = ''; 

                    } 

                } else { 

                    document.getElementById('err1').innerText = '* Please fill all the details before proceeding'; 

                } 

                break; 

            case 'bookTickets': 

                /* Based on the selected station generate Grid content to display trains available */ 

                if (this.availTrainGrid.getSelectedRecords() === undefined || this.availTrainGrid.getSelectedRecords().length === 0) { 

                    document.getElementById('err2').innerText = '* Select your convenient train'; 

                } else { 

                    this.tab.enableTab(2, true);  /* Enables the third tab item*/ 

                    this.tab.enableTab(1, false);  /* Disables the second tab item*/ 

                    document.getElementById('err2').innerText = ''; 

                } 

                break; 

            case 'confirmTickets': 

                /* Get the Passenger details and validate the fields must not be left empty */ 

                if (this.input1.nativeElement.value === '' || isNOU(this.passgender1.value) || isNOU(this.passage1.value)) { 

                    document.getElementById('err3').innerText = '* Please enter passenger details'; 

                } else { 

                    this.tab.enableTab(3, true);  /* Enables the fourth tab item*/ 

                    this.tab.enableTab(2, false);  /* Disables the third tab item*/ 

                    document.getElementById('err3').innerText = ''; 

                    this.finalizeDetails(e); 

                } 

                break; 

            case 'makePayment': 

                this.alertDlg.show(); 

                break; 

            case 'goToSearch': 

                /* Go back to change class, date or boarding places */ 

                this.selectedTrain = []; 

                this.tab.enableTab(0, true);  /* Enables the first tab item*/ 

                this.tab.select(0); 

                this.tab.enableTab(1, false);  /* Disables the second tab item*/ 

                break; 

            case 'goBackToBook': 

                /* Change the preferred train chosen already */ 

                this.tab.enableTab(1, true);  /* Enables the second tab item*/ 

                this.tab.select(1); 

                this.tab.enableTab(2, false);  /* Disables the third tab item*/ 

                break; 

            case 'goBackDetails': 

                /* Update passenger detail before confirming the payment */ 

                this.tab.enableTab(2, true);  /* Enables the third tab item*/ 

                this.tab.select(2); 

                this.tab.enableTab(3, false);  /* Disables the fourth tab item*/ 

                break; 

        } 

    } 

  

  

Sample: https://stackblitz.com/edit/tab-wizard?file=main.ts 

  

Kindly try the above sample and get back to us if you need further assistance. 

Regards, 

Satheesh Kumar B 

[Fabiano Melo]

Hi

My need is simpler. I have only three tabs and I start with the first tab open and I want to click on a button to enable the other tabs and open the second tab. I created two simple methods that in theory should work, one for when the screen is loaded and one for when to click the button:

< ejs-tab #tab id="element" heightAdjustMode="Auto" overflowMode="Scrollable" class="e-fill" (selecting)="tabSelecting($event)" >

     ...

< /ejs-tab >

@ViewChild('tab', { static: true }) tab: TabComponent;

ngAfterViewInit () {

       this.startTabs ();

}

startTabs () {

      this.tab.enableTab (0, true);

      this.tab.enableTab (1, false);

      this.tab.enableTab (2, false);

      this.tab.select (0);

}

enableTabs () {

      this.tab.enableTab (0, true);

      this.tab.enableTab (1, true);

      this.tab.enableTab (2, true);

      this.tab.select (1);

}

Now I don't know if it has to do with the version of the application's angle that is in 8.2.14 and the update has not yet been made. The version of Syncfusion is at 18.3.47. If the problem is the angular version we will have to solve this here.

The problem that occurs is that even with startTabs () nothing is in one and all tabs are enabled. If I ask to select a tab with this.tab.select (0), the error below is displayed on the Chrome console:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'children' of null

TypeError: Cannot read property 'children' of null

    at TabComponent.getTrgContent (ej2-navigations.es2015.js: 7690)

    at TabComponent.setActive (ej2-navigations.es2015.js: 7947)

    at TabComponent.selectingContent (ej2-navigations.es2015.js: 8577)

    at TabComponent. (ej2-navigations.es2015.js: 8549)

    at TabComponent.push ../ node_modules/@syncfusion/ej2-angular-base/src/component-base.js.ComponentBase.trigger (component-base.js: 300)

    at TabComponent.select (ej2-navigations.es2015.js: 8547)

    at UsuarioFormPage.startTabs (usuario-form.page.ts: 263)

    at UsuarioFormPage.ngAfterViewInit (usuario-form.page.ts: 171)

    at callProviderLifecycles (core.js: 32328)

    at callElementProvidersLifecycles (core.js: 32293)

    at resolvePromise (zone-evergreen.js: 797)

    at resolvePromise (zone-evergreen.js: 754)

    at zone-evergreen.js: 858

    at ZoneDelegate.invokeTask (zone-evergreen.js: 391)

    at Object.onInvokeTask (core.js: 39680)

    at ZoneDelegate.invokeTask (zone-evergreen.js: 390)

    at Zone.runTask (zone-evergreen.js: 168)

    at drainMicroTaskQueue (zone-evergreen.js: 559)

    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js: 469)

    at invokeTask (zone-evergreen.js: 1603)

[Satheesh Kumar Balasubramanian]

Hi Fabiano, 

  

Thanks for your update. 

  

We have validated your reported query "Problem opening a tab using a method" and suggest you to use Disabled property in TabItem and SelectedItem property in Tab instead of enableTab and select public methods. 

  

Code snippet:  

  public ngAfterViewInit(): void {

    this.startTabs();

  }

  public startTabs(): void {

    this.tabObj.items[0].disabled = false; /* Enables the First tab item*/

    this.tabObj.items[1].disabled = true; /* Disables the Second tab item*/

    this.tabObj.items[2].disabled = true; /* Disables the Third tab item*/

    this.tabObj.selectedItem = 0; /* Selects the First tab item*/

  }

  public enableTabs(event): void {

    this.tabObj.items[0].disabled = true; /* Disables the First tab item*/

    this.tabObj.items[1].disabled = true; /* Disables the Second tab item*/

    this.tabObj.items[2].disabled = true; /* Disables the Third tab item*/

    this.tabObj.selectedItem = 1; /* Selects the Second tab item*/

  }

           

  

Sample: https://stackblitz.com/edit/tab-disable-issue?file=app.component.ts 

  

Kindly try the above sample and get back to us if you need further assistance. 

Regards, 

Satheesh Kumar B