Hi Team,
How can we change the toolbar tab position(export at the right side) and icons
Regards
Shilpi
Hello, Shilpi,
Thank you for your questions.
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;
}
}
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
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
Hello, Shilpi,
Thank you for your reply.
rightGroup: true
to the desired Tabs.rightGroup
property is missing in the Flexmonster typescript declarations. 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/
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
Thank you it worked fine.
One more thing, can we change one of the toolbar icon on cellclick?
Regards
Shilpi
Hello, Shilpi,
Thank you for your response.
We are glad to hear that the provided solution helped.
cellclick
event is triggered.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.
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