Download Free Trial

Customize tool bar, resizing Issues

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

1 answer

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.

Please login or Register to Submit Answer