Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How can we change the toolbar tab position and icons

Answered
shilpi asked on April 6, 2020

Hi Team,
 
How can we change the toolbar tab position(export at the right side) and icons
 
Regards
Shilpi

6 answers

Public
Vera Didenko Flexmonster April 7, 2020

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

Public
kaavya April 8, 2020

Thank you vera for the response, solution worked fine.
In addition to that
1- I want few of my icons to be at right side. Eg: export I want to be right side next to format icon.
2- Can we configure the path(calling it from assets or image folder) for icon instead of passing full svg content ?
 
How can be achieved?
 
Regards
Shilpi

Public
Vera Didenko Flexmonster April 8, 2020

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

Public
shilpi April 13, 2020

Thank you it worked fine.
 
One more thing, can we change one of the toolbar icon on cellclick?
 
Regards
Shilpi

Public
Vera Didenko Flexmonster April 14, 2020

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

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster April 22, 2020

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

Please login or Register to Submit Answer