Load new tabs dynamically at the click event of button

[Namita]

Hi,

I am loading tabs in starting with a variable. Here is my code:-

<div *ngFor="let item of TabsDetails">

            <div *ngIf="item.IsBranch;then branch_content else noBranch_content"></div>

            <!--Block with Branch-->

            <ng-template #branch_content>

              <e-tabitem [header]="{ 'text': item.Label }">

                <ng-template #content>

                  <img src={{iconImageSource}} (click)="fnBranchPopUp(item.Id)" />

                  <ejs-grid #overviewgrid id='overviewgrid' [dataSource]='gridDataSource' rowHeight='38' [allowSelection]='true'

                            height='600' width="1000px">

                    <e-columns>

                      <e-column headerText="Actions" [filter]='filterSettings' width='230'></e-column>

                      <!--for printing Grid columns-->

                      <div *ngFor="let item of gridColumns">

                        <e-column [field]="item.Label" [headerText]="item.Label" width='230'></e-column>

                      </div>

                    </e-columns>

                  </ejs-grid>

                </ng-template>

              </e-tabitem>

            </ng-template>

            <!--else block without branch-->

            <ng-template #noBranch_content>

              <e-tabitem [header]="{ 'text': item.Label }">

                <ng-template #content>

                  <ejs-grid #overviewgrid id='overviewgrid' [dataSource]='gridDataSource' rowHeight='38' [allowSelection]='true'

                            height='600' width="1000px">

                    <e-columns>

                      <e-column headerText="Actions" [filter]='filterSettings' width='230'></e-column>

                      <!--for printing Grid columns-->

                      <div *ngFor="let item of gridColumns">

                        <e-column [field]="item.Label" [headerText]="item.Label" width='230'></e-column>

                      </div>

                    </e-columns>

                  </ejs-grid>

                </ng-template>

              </e-tabitem>

            </ng-template>

          </div>

Inside the tab item, I am showing grid with dynamic columns.

But now issues is, I need to reload new tabs the button click, I have new tabs names at the rowselect event of Grid.

But I am not able to load new tabs. Kindly help.

[Balasubramanian Sattanathan]

Hi Namita, 

 

Greetings from Syncfusion Support. 

 

We let you know that your query has been addressed already in the following ticket #152356. 

 

Please let us know if you have any concern.   

 

Regards, 

Balasubramanian S 

[Namita]

Hi

Both issues are different. #152356 is about creating Grid columns dynamically on click of tabs.

Now issue is reload new tabs on a button click which are coming from Database.

[Namita]

I need to add multiple tabs in loop in ts file, but it adds only 1 tab

[Balasubramanian Sattanathan]

Hi Namita, 

 

Thanks for the update. 

 

We have analyzed your reported scenario at our end and got confused about your requirements. Kindly confirm whether your requirement is needed to add multiple tab components dynamically for the single page or add multiple tab items dynamically for the single tab. 

 

Please let us know if you have any concerns. 

 

Regards, 

Balasubramanian S 

[Namita]

my tabs are changing dynamically. after clicking on a  botton, new tabs are coming from database which I need to show on screen again.

[Namita]

May we have call on that?

[Balasubramanian Sattanathan]

Hi Namita, 

  

We have created a new support incident under your account, please follow the incident(#270360) for further assistance. Kindly log on to our support website to check further updates on it    

   

https://www.syncfusion.com/Account/Logon?ReturnUrl=/support/directtrac  

  

Regards,  

Balasubramanian S