Customize tool bar, resizing Issues

Hello, Navaneethakrishnan,
Thank you for writing to us!
First of all, we suggest updating files for integration with Angular 4 from our GitHub repository. Please make sure that flexmonster.d.ts and flexmonster.angular4.ts are updated.
Below are the comments on your issues:
1. 1. In order to customize Toolbar, you need to use beforetoolbarcreated event. Previously it was not supported in Angular 4, that's why when you defined (beforetoolbarcreated)="customizeToolbar($event)", as a result customizeToolbar(toolbar: any) was never executed. This issue is already fixed, so after updating everything should work as expected.
1. 2. As about flexmonster.customizeToolbar method, it doesn't get executed because there is no such method in our API. Please use beforetoolbarcreated event instead.
1. 3. In your PivotGrid.ts, we have also noticed the comment that customizeCellFunction(cell: string, data: string) doesn't get triggered. This issue is also fixed now. Please have a look how customizeCell should be defined and the way it should be used.
2. Thank you for providing the video to demonstrate the issues with resizing of the PivotGrid. We were able to reproduce this incorrect behavior on our side. The fix will be delivered with minor release 2.417, ETA Mar 26th.
3. Concerning upgrades and patches, we would like to explain how the full process works. We release minor release for Flexmonster every other week. Our CDN is updated as soon as each new version is released. So, if you are pointing to the CDN, you are automatically using the latest version of PivotGrid. In order to upgrade to the latest when you want to, you need to manually download the latest version of Flexmonster from Client's Area, and refer to it locally instead of our CDN. This can be achieved in two steps. First, replace the path to flexmonster.js with the path to your local file:

<script src="flexmonster/flexmonster.js"></script>

Second, replace the value of componentFolder with the path to your local flexmonster/ folder:

<fm-pivot [componentFolder]="'https://cdn.flexmonster.com/'"
…
> 

The componentFolder parameter defines where all necessary files, like .css , or toolbar files are taken. [componentFolder]="'https://cdn.flexmonster.com/'" means you are using files from our CDN. Referring your local flexmonster/ folder will allow manual updating to the latest version.
One more point we want to mention regarding the update process, we suggest you watch our Angular 4 repository. Here is a guide that explains how to watch a repository.  
When we update .ts files for Angular 4 integration, you will need to update these files on your side. These files are not updated very often, mostly when adding new functionality. However, it is useful to watch this repository to get such updates.
I hope all your questions are answered. Please let me know if you need clarifications.
Regards,
Tanya

Hello, Navaneethakrishnan,
We are glad to inform that the version 2.417 has already been released. You are welcome to update it on our website. Also please update flexmonster.angular4.ts file from our GitHub.
The issue with component resizing inside the tabs was fixed. Calling refresh() is required after the tab is visible.
We suggest the following approach: add #pivotX id to each <fm-pivot> directive, where X is a number of a tab where pivot instance is shown. To call refresh() we need to know which tab is active now. This code demonstrates how we use an onTabChange event for this purpose:

<mat-tab-group #tabs (selectedTabChange)="onTabChange(tabs.selectedIndex)">
<mat-tab label="Tab 1">
<fm-pivot #pivot1 [componentFolder]="'https://cdn.flexmonster.com/'" [toolbar]="true" [width]="'100%'" [height]="500">
Flexmonster will appear here
</fm-pivot>
</mat-tab>
<mat-tab label="Tab 2">
<fm-pivot #pivot2 [componentFolder]="'https://cdn.flexmonster.com/'" [toolbar]="true" [width]="'100%'" [height]="500">
Flexmonster will appear here
</fm-pivot>
</mat-tab>
</mat-tab-group>

Here is how we use the onTabChange event to refresh the component when switching between tabs:

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild("pivot1") pivot1: FlexmonsterPivot;
@ViewChild("pivot2") pivot2: FlexmonsterPivot;
onTabChange(index) {
console.log("tab change", index);
index++;
if (this["pivot" + index]) {
this["pivot" + index].flexmonster.refresh();
}
}
}

Please let me know if you need more details.
Regards,
Tanya

Hi Krishnan,
 
Thank you for confirming that the resizing issue is resolved after the flexmonster.angular4.ts file update.
The other suggested code changes are required to adjust the width and height of the Pivot Grid automatically after switching to the tab with the Pivot Grid. The idea of the code provided in the previous message is to call refresh() API call for the pivot table instance after the tab change to make sure its width and height are adjusted properly after the visibility change.
Please let me know if the explanation of the code is clear for you.
 
Kind regards,
Iryna