Page 1 of 1
How to add a new button into the Dropdown Menu Toolbar?
Posted: Wed Oct 11, 2023 10:19 am
by yurilima
I have that custom button which i would like to add into that menu toolbar dropwdown, do y have any good code example to add?
Code: Select all
const buttonName = this.baseListServices.i18nService.translate(_('document.save-to-assets'))
let userButton = (this.viewer.jsObject as any).SmallButton("none", buttonName, "none"); // (name, captionText, imageName, toolTip, arrow, styleName);
// userButton.image.src = "assets/icons/saveAsstes.png";
userButton.image.src = "assets/icons/box-archive-solid.svg";
userButton.name = "saveToAssets"; // It is the name of the button
userButton.tooltip = this.baseListServices.i18nService.translate(_('document.save-to-assets')); // It is the tooltip of the button
userButton.arrow = true; // It means that the button has no drop-down menu
// userButton.action = function () { alert("My Button Event"); }
userButton.onclick = async () => { await this.saveToDoducmentAssets() };
let toolbarTable = this.viewer.jsObject.controls.toolbar.firstChild.firstChild; // It is the toolbar table
let buttonsTable = toolbarTable.rows[0].firstChild.firstChild; // It is the table with buttons
// console.log(buttonsTable);
let userButtonCell = buttonsTable.rows[0].insertCell(0); // It is the cell for the new button
userButtonCell.className = "stiJsViewerClearAllStyles"; // It is the class for the new button
userButtonCell.appendChild(userButton); // Add the new button to the cell
Re: How to add a new button into the Dropdown Menu Toolbar?
Posted: Thu Oct 12, 2023 9:41 pm
by Lech Kulikowski
Hello,
We need some time to prepare a sample code for you.
Thank you.
Re: How to add a new button into the Dropdown Menu Toolbar?
Posted: Fri Oct 13, 2023 10:51 am
by Lech Kulikowski
Hello,
You can use the following code:
var viewer = new Stimulsoft.Viewer.StiViewer(viewerOptions, "StiViewer", false);
viewer.renderHtml("content");
var printMenu = viewer.jsObject.controls.menus.printMenu;
var customPrintItem = viewer.jsObject.VerticalMenuItem(printMenu, "itemName", "Item Text", "customImageName"/*or null*/, "itemKey");
customPrintItem.image.src = "image url";
printMenu.innerContent.appendChild(customPrintItem);
customPrintItem.action = function () {
printMenu.changeVisibleState(false);
//write your code here
alert("Click event!");
}
Thank you.
Re: How to add a new button into the Dropdown Menu Toolbar?
Posted: Sat Oct 14, 2023 5:14 am
by yurilima
hi, Lech Kulikowski.
Thank you so much for your replay, i will try it out very soon, and let you know if its worked.
I appreciated it.
Thank you.
Yuri Lima
Re: How to add a new button into the Dropdown Menu Toolbar?
Posted: Mon Oct 16, 2023 7:31 pm
by Lech Kulikowski
Hello Yuri Lima,
You are welcome.
Re: How to add a new button into the Dropdown Menu Toolbar?
Posted: Thu Oct 19, 2023 6:28 am
by yurilima
hi, Lech Kulikowski.
The is being placed to the right position, Thank You.
However, the icon image is not working as normal as before.
I've tried to set with the same link path and with stimulsoft icon too, but it doesnt show the icon.
Details: If a leave null, the icon disappear too.
Do you what i may doing wrong? Or is there another way to set in that case?
Thank You
Yuri Lima
Code: Select all
/**
* @description Creates a Save Asset Button in the toolbar under the Print Dropdown
*/
createSaveToAssetsButtonInPrintDropdown(): void {
let text = this.baseListServices.i18nService.translate(_('document.save-to-assets'));
var printMenu = this.viewer.jsObject.controls.menus.printMenu;
var customPrintItem = (this.viewer.jsObject as any).VerticalMenuItem(printMenu, "itemName", text, "https://www.stimulsoft.com/favicon.png", "itemKey");
customPrintItem.image.src = "https://www.stimulsoft.com/favicon.png";
// customPrintItem.tooltip = this.baseListServices.i18nService.translate(_('document.save-to-assets'));
customPrintItem.onclick = async () => { await this.saveToDoducmentAssets() };
printMenu.innerContent.appendChild(customPrintItem);
}
Re: How to add a new button into the Dropdown Menu Toolbar?
Posted: Thu Oct 19, 2023 9:39 am
by Lech Kulikowski
Hello,
You should add the following code:
customPrintItem.image.style.display = "";
Thank you.
Re: How to add a new button into the Dropdown Menu Toolbar?
Posted: Thu Oct 26, 2023 10:33 pm
by yurilima
Hi, Lech Kulikowski
I just would like to thank you, that really works.
Re: How to add a new button into the Dropdown Menu Toolbar?
Posted: Sat Oct 28, 2023 5:09 pm
by Lech Kulikowski
Hello,
You are welcome.
