How can we change the toolbar tab position and icons

Hello, Shilpi,
 
Thank you for your questions. 
 

1. How to change a Toolbar Tab's position:

   This can be achieved by using the beforetoolbarcreated event and rearranging the Toolbar Tabs array, for example in Angular:

   In app.component.html:

   <fm-pivot#pivot
   
     [toolbar]="true"
   
     [width]="'100%'"
     
     [height]="500"
   
     [report]="pivotReport"
   
     (beforetoolbarcreated)="customizeToolbar($event)">
   
   </fm-pivot>

   In app.component.ts:

   reposition(arr, old_index, new_index){
      // Rearrange the array
   }
   
   
   customizeToolbar(toolbar:Flexmonster.Toolbar):void {
   
      // 1. Get all tabs
      var tabs=toolbar.getTabs();
   
      // 2. The reference to the method to reposition the tabs
      var repositioner = this.reposition.bind(this);
   
   
      toolbar.getTabs=function () {
   
        // 3. Reposition the desired Tab:
        repositioner(tabs, 3, 0);
   
        return tabs;
      }
   
   }

2. How to change a Tab's icon:

   You can change the icon of a Toolbar Tab by specifying the desired icon in the Tab's icon property. The icon property accepts a string representing the HTML tag containing your custom icon. 

 
We have prepared a JSFiddle example illustrating the above suggestions: https://jsfiddle.net/flexmonster/z2p43yhb/
In the example, the Export Tab's position is changed, and the Connect Tab's icon is replaced by a custom SVG one. 
 
Please let us know if this works.
Looking forward to your response.
 
Kind regards,
Vera

Hello, Shilpi, 
 
Thank you for your reply. 
 

1. About positioning Tabs on the right side of the Toolbar:
   For Tabs to be shown on the right side of the Toolbar, we kindly suggest adding rightGroup: true to the desired Tabs.
   Regarding Angular, we have noticed that the rightGroup property is missing in the Flexmonster typescript declarations. 
   Our team will update the typescript declarations to include this property in the next minor release version with the ETA 21st of April. 
   Meanwhile, we kindly recommend adding the rightGroup property the following way:
   tabs[3]["rightGroup"] = true

   For example, in app.component.ts:

   reposition(arr, old_index, new_index){
   // Rearrange the array
   }
   
   
   customizeToolbar(toolbar:Flexmonster.Toolbar):void {
   
     // 1. Get all tabs
     var tabs=toolbar.getTabs();
   
     // 2. The reference to the method to reposition the tabs
     var repositioner = this.reposition.bind(this);
   
   
     toolbar.getTabs=function () {
   
       const isExportTab = (tab) => tab.id == "fm-tab-export";
       const isFormatTab = (tab) => tab.id == "fm-tab-format";
   
       // 3. Reposition the "Export" Tab:    
       repositioner(tabs, tabs.findIndex(isExportTab), tabs.findIndex(isFormatTab));
   
       // 4. Add "rightGroup" to the "Export" Tab:
       tabs[tabs.findIndex(isExportTab)]["rightGroup"] = true;
   
       return tabs;
     }
   
   }

   Here is a JSFiddle for illustration: https://jsfiddle.net/flexmonster/pbg0vado/

2. Regarding the path for the icon:
   Yes, instead of passing full SVG content, you could specify the path to your image file, for example:

   icon: "<img src='PATH_TO_YOUR_IMAGES/YOUR_IMAGE.svg'/>"

 
Please let us know if this works fine for you.
 
Waiting for your response.
 
Kind regards,
Vera

Hello, Shilpi,
 
Thank you for your response.
 
We are glad to hear that the provided solution helped.
 

1. About changing a Toolbar Tab's icon on cellclick:
   This can be achieved by changing the needed Toolbar Tab's icon when the cellclick event is triggered.
   A specific Tab's icon can be selected by using the Tab's id, for example, the Grid Tab's icon can be selected in the following way:

   document.querySelector("#fm-tab-grid svg")

   Please see the following JSFiddle example we have prepared for you: https://jsfiddle.net/flexmonster/am27knyg/
   In the example, when a cell on the grid is clicked, the Grid Toolbar Tab's icon is changed.

2. If you would like to change the Toolbar Tab's icon when it is clicked, this is also possible:
   This can be achieved by adding a click event handler to the needed Tab's icon.
   We kindly suggest adding the click event handler when the reportcomplete event is triggered to make sure the Toolbar Tab is rendered on the page.

   Please see the following JSFiddle example we have prepared for you: https://jsfiddle.net/flexmonster/yncpehLu/
   In the example, when the Grid Toolbar Tab's icon is clicked, the click event is fired and the icon is changed.

   In addition, here are the corresponding Angular code snippets:
   In app.component.html:

   <fm-pivot #pivot 
     [toolbar]="true" 
     [width]="'100%'" 
     [height]="500" 
     [report]="pivotReport"
     (reportcomplete)="onReportComplete()">
   </fm-pivot>

   In app.component.ts:

onReportComplete(): void {
   this.pivot.flexmonster.off('reportcomplete');
   
   // add the event handler to the specific Tab's icon:
   document.querySelector("#fm-tab-grid svg").addEventListener("click", this.changeIcon);
}

// the click event handler:
changeIcon():void{

   //custom svg icon represented as an HTML string: 
   var icon = "<svg>...</svg>"


   //convert html string to node element:

   var parser = new DOMParser();
   var doc = parser.parseFromString(icon, 'text/html');


   //change the icon:

   var el = document.querySelector("#fm-tab-grid svg");
   el["parentNode"].replaceChild(doc.body.firstChild, el);

}

 
Please let us know if this helps.
Looking forward to your reply.
 
Kind regards,
Vera

Hi Shilpi,
 
We are glad to announce that the Typescript declarations were updated to contain the rightGroup property.
 
This is included in the 2.8.5 version of Flexmonster: https://www.flexmonster.com/release-notes/
You are welcome to update the component: https://www.flexmonster.com/doc/updating-to-the-latest-version/
 
Please contact us in case any questions arise.
 
Best regards,
Mykhailo