Get Free Trial

Customize tool bar, resizing Issues

Navaneethakrishnan Sampath asked on March 6, 2018

We are facing some issues in using the PivotGrid and we need your inputs in addressing those issues. Please find the list below:

  1. Customize tool bar: We need to customize the toolbar shown on top of the PivotGrid i.e. we want to dynamically authorize the buttons “Connect, Open, Save etc.” based on LoggedIn user roles/access. We tried the code (please refer attached .ts and .html files) but the event “customizeToolbar($event)” doesn’t gets triggered at all. Not sure what is the mistake from my side and I need to fire that event to handle the above mentioned scenario.

The below mentioned code doesn’t gets executed (either of them)
flexmonster.customizeToolbar(function (toolbar: any)
                    console.log(“In event flexmonster.customizeToolbar”);
                    var tabs = toolbar.getTabs();
                    //perform necessary logic here…
              customizeToolbar(toolbar: any)
                    console.log(“In event customizeToolbar”);
                    var tabs = toolbar.getTabs();
//perform necessary logic here…

  1. Toolbar buttons disappear on resizing of the PivotGrid. Please refer the Screencastify video attached to explain the issue in detail. Actually there are 2 issues arises when we resize the browser window which can be noticed in the video.
  1. After resize the browser window the toolbar buttons disappear (“Format, Options, Fields etc.)
  2. Also the width and height of the Pivot Grids doesn’t adjust automatically. When we try to minimize the size of the window, still the size of the PivotGrid is not getting altered (both width and height of the PivotGrid).

Is there any event which can capture this browser resizing and automatically adjust the size of the PivotGrid? We’re currently calculating the screen size in the constructor function, when we set it 100%, it doesn’t work.
let getWindow = () => {
                    return window.innerHeight – 210;
             console.log(“getWindow : ” + getWindow());
this.gridHeight = getWindow();

  1. Explain how upgrades and patches work whenever you release a new version of the PivotGrid.  We are pointing to the CDN currently.  It doesn’t seem to be version specific.  So, we’re concerned that you’ll apply an upgrade or patch and it will break something in our system.  Are we always getting the latest version??  Or what do we need to do to upgrade to the latest when we want to?

Can you please explain how internally your PivotGrid works with our code?
<fm-pivot [componentFolder]=”‘'”

Also in the components we refer to the interface components shared by you stored locally.
import { FlexmonsterPivot } from “../references/flexmonster/flexmonster.angular4”;
Please clarify if any code changes to be done from our side to keep upgrading your PivotGrid to be latest?
Please download the source code and video from the link

4 answers

Tanya Gryshko Tanya Gryshko Flexmonster March 8, 2018

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]="''"


The componentFolder parameter defines where all necessary files, like .css , or toolbar files are taken. [componentFolder]="''" 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.

Tanya Gryshko Tanya Gryshko Flexmonster March 28, 2018

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]="''" [toolbar]="true" [width]="'100%'" [height]="500">
Flexmonster will appear here
<mat-tab label="Tab 2">
<fm-pivot #pivot2 [componentFolder]="''" [toolbar]="true" [width]="'100%'" [height]="500">
Flexmonster will appear here

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

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);
if (this["pivot" + index]) {
this["pivot" + index].flexmonster.refresh();

Please let me know if you need more details.

Navaneethakrishnan Sampath March 28, 2018

Thanks for your answer. I updated only the flexmonster.angular4.ts file from GitHub repo and I tried executing my application, and I notice that the resizing issue is resolved. Please note that I didn’t do any other changes as suggested by you in your reply.
Can you please clarify why the other code changes are required and is it addressing any other problem?

Iryna Kulchytska Iryna Kulchytska Flexmonster March 29, 2018

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,

Please login or Register to Submit Answer