Menu
Download Free Trial

Toolbar does not render correctly

Hello,
Yesterday I did the component upgrade, migrating from version 234 to 2.40 build 08/08/2017 10:58:43, but my custom toolbar did not load correctly.
 
Follow code below:
 

 pivot = $("#pivotContainer").flexmonster({
componentFolder: "/Content/js/flexmonster/",
global: {
localization: "loc/pr.json"
},
height:"100%",
toolbar: true,
beforetoolbarcreated: customizeToolbar,
licenseKey: "XXXXXX-XXXXXXX"
});

var customizeToolbar = function(toolbar) {
var tabs = toolbar.getTabs();

toolbar.getTabs = function() {
delete tabs[0];
delete tabs[1];
delete tabs[2];

// add new tab
tabs.unshift({
id: "fm-tab-save",
title: "Save",
handler: "savetabHandler"
});

tabs.unshift({
id: "fm-tab-reload",
title: "Reload",
handler: "reloadCube"
});

return tabs;
}
 toolbar.reloadCube  = function() {
console.log("reload");
}
toolbar.savetabHandler = function() {
console.log("save")
}
}

 

Attachments:
Capturar.jpg

2 answers

Public
Cleyton Barroso August 16, 2017

Toolbar in old version

Attachments:
old_version.jpg

Public
Iryna Kulchytska Flexmonster August 17, 2017

Hello Cleyton,
 
Thank you for writing to us.
The toolbar was changed in 2.4 version and I need to ask you to update your toolbar customization accordingly.
The icons were changed in 2.4. Now they are vector and if you like them please add icon property to your custom tabs in customizeToolbar function, as follows:

// add new tab
tabs.unshift({
  id: "fm-tab-save",
  title: "Save",
  handler: "savetabHandler",
  icon: this.icons.save
});

tabs.unshift({
  id: "fm-tab-reload",
  title: "Reload",
  handler: "reloadCube",
  icon: this.icons.connect
});

 
And please remove CSS with old icons in this case.
Also, the order of tabs was changed. If you like the current order, no changes are needed in your customizeToolbar function. If you would like to use the 2.4 toolbar with the old order of the tabs, please compose it in redefined toolbar.getTabs() function, as follows:

var customizeToolbar = function(toolbar) {
var tabs = toolbar.getTabs();

toolbar.getTabs = function() {
var newTabs = [];

// add new tab
newTabs.push({
id: "fm-tab-reload",
title: "Reload",
handler: "reloadCube",
icon: this.icons.connect
});
newTabs.push({
id: "fm-tab-save",
title: "Save",
handler: "savetabHandler",
icon: this.icons.save
});

newTabs.push(tabs[5]); //grid
newTabs.push(tabs[6]); //charts
//... etc

return newTabs;
}
//...
}

 
Please let me know if the toolbar looks as you expected after the changes.
 
Kind regards,
Iryna

Please login or Register to Submit Answer