How to add a new button into the Dropdown Menu Toolbar?

[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
    

[Lech Kulikowski]

Hello,

We need some time to prepare a sample code for you.

Thank you.

[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.

[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

[Lech Kulikowski]

Hello Yuri Lima,

You are welcome.

[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);
  }

[Lech Kulikowski]

Hello,

You should add the following code:
customPrintItem.image.style.display = "";

Thank you.

[yurilima]

Hi, Lech Kulikowski

I just would like to thank you, that really works.

[Lech Kulikowski]

Hello,

You are welcome.