pivot grid header not alleging correctly at first view

[talal]

I have pivot grid implemented in angular, my issue is that once the data is completed and the pivot is rendered the header's columns are not showing correctly :

once I inspect the page or change the browser's windows size, then the tables shows as expected:

I tried playing around with grid settings or the datasource but got no luck.

Here is the HTML part:

 <div class="m-portlet__body">

        <div class="control-section" style="overflow:auto;">

          <ejs-pivotview #pivotview id='PivotView' [gridSettings]='gridSettings' [dataSourceSettings]=dataSourcePivot width="100%" height='300' spinnerTemplate="<i class='fa fa-cog fa-spin fa-3x fa-fw'></i>" allowConditionalFormatting='true'></ejs-pivotview>

      </div>

and the ts section:

this.dataSourcePivot = {

      enableSorting: false,

      columns: [{ name: 'account_number' }],

      values: [{ name: 'value', caption: 'Value' }],

      dataSource: this.dataPivot,

      rows: [{ name: 'name' }],

      formatSettings: [{ name: 'value', format: 'C0' }],

      expandAll: false,

      filters: [],

      conditionalFormatSettings: [

        {

          label: 'Monthly Savings',

          conditions: 'GreaterThan',

          value1: 0,

          style: {

            backgroundColor: '#66fe2621',

            color: 'black',

            fontSize: '16px'

          }

        },

        {

          label: 'Monthly Savings',

          conditions: 'LessThanOrEqualTo',

          value1: 0,

          style: {

            backgroundColor: '#fe562621',

            color: 'black'

          }

        }

      ],

      showRowGrandTotals: true

      // sortSettings: [{name: 'sort', order: 'Ascending'}]

    };

    this.gridSettings = {

      //allowResizing: false,

      //allowReordering: false,

     // allowAutoResizing: true,

     columnWidth: 150,

     // height: 'auto',

     // width: 'both',

     // gridLines: 'Both',

     // allowTextWrap: true,

   //   rowHeight: 100

  } as GridSettings;

//THIS IS HOW I SET THE DATA IN NGINT , I call http endpoint and set the dataPivot:

this.dataPivot = res['Items'];

this.pivotGridObj.dataSourceSettings.dataSource = res['Items'];

[Manikandan Murugesan]

Hi Talal, 

  

We have already fixed this issue in our previous weekly release. To resolve the issue at your end, please update the pivot dependency packages to the latest version. Also, we have prepared an angular sample for your reference below. 

  

Sample: https://stackblitz.com/edit/angular-h6qt6b?file=app.component.ts 

  

If still the problem exists, kindly reproduce the problem in the above provided sample and revert to us (or) send your sample that replicating the problem. This would be helpful for us to investigate the reported problem at our end and provide the solution at the earliest. 

  

Regards, 

Manikandan