Hi,
I'm looking to add a custom button to the designer toolbar. Vanilla JS. Has anyone gotten this to work?
Thanks!
Add Custom Button to Designer
Re: Add Custom Button to Designer
Hello,
Thank you for the question.
Please try this code
<body>
<div onclick="aaa()">Load Report</div>
<form id="form1" runat="server">
<div>
<cc3:StiWebDesigner runat="server" ID="StiWebDesigner1" />
</div>
</form>
<script>
//where jsStiWebDesigner1 - "js" + designer ID
var toolBarRow = jsStiWebDesigner1.options.toolBar.firstChild.tr[0];
//Add images for custom buttons to designer images collection
jsStiWebDesigner1.options.images["ImageForCustomButton1"] = "https://www.stimulsoft.com/favicon.ico"; //For example
var customButton = jsStiWebDesigner1.StatusPanelButton("customButton1", null, "ImageForCustomButton1", null, null, 30, 30);
customButton.image.style.width = customButton.image.style.height = "16px";
var buttonCell = document.createElement("td");
buttonCell.className = "stiDesignerToolButtonCell";
buttonCell.appendChild(customButton);
toolBarRow.insertBefore(buttonCell, toolBarRow.childNodes[3]);
customButton.action = function () {
alert("Button clicked!");
}
</script>
</body>
Thank you for the question.
Please try this code
<body>
<div onclick="aaa()">Load Report</div>
<form id="form1" runat="server">
<div>
<cc3:StiWebDesigner runat="server" ID="StiWebDesigner1" />
</div>
</form>
<script>
//where jsStiWebDesigner1 - "js" + designer ID
var toolBarRow = jsStiWebDesigner1.options.toolBar.firstChild.tr[0];
//Add images for custom buttons to designer images collection
jsStiWebDesigner1.options.images["ImageForCustomButton1"] = "https://www.stimulsoft.com/favicon.ico"; //For example
var customButton = jsStiWebDesigner1.StatusPanelButton("customButton1", null, "ImageForCustomButton1", null, null, 30, 30);
customButton.image.style.width = customButton.image.style.height = "16px";
var buttonCell = document.createElement("td");
buttonCell.className = "stiDesignerToolButtonCell";
buttonCell.appendChild(customButton);
toolBarRow.insertBefore(buttonCell, toolBarRow.childNodes[3]);
customButton.action = function () {
alert("Button clicked!");
}
</script>
</body>
Re: Add Custom Button to Designer
Thank you.
However, I am not using the .net library. I am using the vanilla JS library.
jsStiWebDesigner1.options.toolBar is undefined.
Thanks for the help!
However, I am not using the .net library. I am using the vanilla JS library.
jsStiWebDesigner1.options.toolBar is undefined.
Thanks for the help!
Re: Add Custom Button to Designer
Hello.
The JS part of the Designer is the same.
Please, try jsStiDesigner.options.toolBar instead.
The Designer object should be created.
Thank you.
The JS part of the Designer is the same.
Please, try jsStiDesigner.options.toolBar instead.
The Designer object should be created.
Thank you.
Re: Add Custom Button to Designer
There it is!
Thanks!
Thanks!
Re: Add Custom Button to Designer
Hello,
We are always glad to help you.
Let us know if you need any additional help.
Thank you.
We are always glad to help you.
Let us know if you need any additional help.
Thank you.