Not able to create columns dynamically inside tab click

[Namita]

I want to define of columns using a variable at the click event of tab.

But it seems like data of variable reaching late from ts to html.

Here is my code:-

In HTML:-

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

      <e-tabitems>

        <!--Creating tabs-->

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

          <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>

                <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>

        </div>

      </e-tabitems>

    </ejs-tab>

In ts file:-

onTabSelect(args: SelectEventArgs) {

    this.stepName = this.TabsDetails[args.selectedIndex];

    console.log(this.stepName.Id);

    

    

    //Firstly get the columns of the Grid for selected step(tab)

    this._service.GetGenericGridColumnsByStepId(this.stepName.Id,10)

      .subscribe(

        data => {

          this.gridColumns = data;

          console.log(this.gridColumns);

        }

      );

   // this.gridDataSource = data;

    

    //this._service.GetGridDataByStepId(this.stepName.Id, 183,1,1,"","","")

    //  .subscribe(

    //    data => {

    //      //console.log(data);

    //      this.gridDataSource = data;

    //    }

    //  );

  }

In the output window, it is not showing any column binding in first two tabs and then wrong columns in 3 and 4 tab.

Kindly do needful.

[Namita]

Hi, 

May I have a web call with Syncfusion Team as I am stuck with two issues.

Kindly let me know

[Balasubramanian Sattanathan]

Hi Namita, 

 

Greetings from Syncfusion Support. 

 

Query – 1: “I want to define of columns using a variable at the click event of tab. But it seems like data of variable reaching late from ts to html.”  

  

We could see that in your code you have dynamically created column object and used ng-For in the column rendering to generate the columns. Since all this process needs to be executed on tab click – Return column data from server, assign it to the variable which is then looped in ng-For to dynamically generate columns and then update in the Grid, it will take some time(Depending on the column data response from the server and the number of columns to be generated). This execution will result in a small delay. If this is not the delay that you are referring to please get back to us with the details and if possible with a video demonstration of the problem.  

  

Query – 2: “In the output window, it is not showing any column binding in first two tabs and then wrong columns in 3 and 4 tab.”  

  

We checked this problem from our end but unfortunately were unable to reproduce it as the columns were properly bound to the Grid on navigating tabs. Please check the below sample for your reference,  

  

Sample: https://stackblitz.com/edit/angular-lcw2yv-5ddfrq?file=default.html  

  

You can compare the above sample with your application and see if you have missed anything.  

  

If you are still facing issue please share us the below information to validate further,  

  

• Are any console errors thrown? If so please share it.
• How many columns are bound to the Grid in each tab.
• Syncfusion package version.
• If possible provide us a simple sample to replicate the problem or try reproducing it in the above provided sample.

  

Or else we will schedule web meeting to directly check your application and validate the problem.  

  

Let us know if you have any concerns. 

 

Regards, 

Balasubramanian S 

[Namita]

My tabs are also dynamic.

Please provide an example in which tabs and e-columns both are dynamic using a variable.

Also, it may issue of same Grid id in every tab click. So can we give dynamic GridId, please help.

[Balasubramanian Sattanathan]

Hi Namita, 

 

Thanks for your update. 

 

We have validated your requirements and prepared sample based on that. We can create tab items dynamically using below code snippets. 

 

<e-tabitem *ngFor="let tab of tabElements"> 

  <ng-template #headerText> 

    <div>{{tab.header}} </div> 

  </ng-template> 

  <ng-template #content> 

      <div class="control-section"> 

        <ejs-grid id={{tab.id}} [dataSource]='data' [allowSelection]='true' 

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

          <e-columns> 

            <e-column field='OrderID' headerText="ID" width='230'></e-column> 

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

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

              </e-column> 

            </div> 

          </e-columns> 

        </ejs-grid> 

      </div> 

  </ng-template> 

</e-tabitem> 

 

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

 

Kindly try the above sample and let us know if you have any concerns. 

 

Regards, 

Balasubramanian S

[Namita]

Hi,

Thanks for your reply.

My requirement is same as you code in your example. My gridColumns are changing at the tab click.

Columns are coming from database through a service when I click on tab. After that they are behaving strange. specially when I am clicking second time on the tabs.

[Vengatesh Maniraj]

Hi Namita,  

 

Thanks for the update. 

  

We have created a new support incident under your account, please follow the incident(#269576) 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, 

Vengatesh.