Change tabs

[Namita]

Hi

My tabs are coming dynamically through a service. And in tab click grid is coming.

I need to change tabs on a click event of button and tabs again coming from service.

here is my html code:-

<ejs-tab #tabs heightAdjustMode='Auto' (selected)='onTabSelect($event)'>

        <e-tabitems>

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

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

              <ng-template #content>

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

                <ejs-grid #genericgrid id={{item.Name}} [dataSource]='gridDataSource' rowHeight='38' [allowSelection]='true'

                          height='auto' width="1000px" (rowDeselected)='rowDeselected($event)'

                          [toolbar]='toolbar' (toolbarClick)='clickHandler($event)' (rowSelected)='rowSelected($event)'

                          [contextMenuItems]='contextMenuItems' (contextMenuClick)='contextMenuClick($event)'

                          allowSorting='true' showColumnMenu='true' allowGrouping='true'

                          [filterSettings]='filterSettings' allowReordering="true"

                          [allowPdfExport]='true' [allowExcelExport]='true' gridLines='Both'

                          [allowPaging]='true' [pageSettings]='pageSetting' allowResizing='true'

                          [allowFiltering]='true' (dataStateChange)='dataStateChange($event)'>

                  <e-columns>

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

                    <e-column type='checkbox' width='50'></e-column>

                    <!--for printing Grid columns-->

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

                      <!--<div *ngIf="item.DataType==datetime; else elsedateblock">

                      <e-column [field]="item.Label" [headerText]="item.Label" width='230' [format]="{type: 'date', format:'dd/MM/yyyy hh:mm:ss a'}"></e-column>

                      </div>

                      <ng-template #elsedateblock>-->

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

      

                      <!--</ng-template>-->

                    </div>

                  </e-columns>

                </ejs-grid>

              </ng-template>

            </e-tabitem>

          </div>

        </e-tabitems>

      </ejs-tab>

I am changing the value of TabsDetails variable on button click events. Tabs are not changing. Please help

[Balasubramanian Sattanathan]

Hi Namita, 

 

Thanks for contacting Syncfusion Support. 

 

We have validated your reported problem “Change tabs” at our side and prepared a sample based on that by making use of the below code snippet. In the below sample, initially, the tabs are rendered with four items and if we click the change tabs button it will change as to two items. 

 

changeTabs(): void { 

  let tabObj = (document.querySelector(".e-tab") as any).ej2_instances[0]; 

  let tabEle = [ 

    { 

      header: { 'text': 'Google' }, 

      content: 'Google' 

    }, 

    { 

      header: { 'text': 'Yahoo' }, 

      content: 'Yahoo' 

    } 

  ]; 

  tabObj.items = tabEle; 

} 

 

Sample: https://stackblitz.com/edit/angular-4le1hh-3qeze8?file=app.component.ts 

 

Kindly try the above sample and let us know if you need further assistance. 

 

Regards, 

Balasubramanian S 

[Namita]

Please let me know, how I can render grid when tabs changed

[Vengatesh Maniraj]

Hi Namita, 

Thanks for the update. 

We have validated your requirement “how I can render grid when tabs changed” at our end and prepared the sample based on that. Kindly refer to the below sample. 

 

Sample: https://stackblitz.com/edit/angular-4le1hh-terges?file=app.component.html 

Kindly try the above sample and get back to us for further assistance. 

Regards, 

Vengatesh