Customizations in Designer
You can add custom controls to the report designer. In this chapter you may find several examples of customizing the report designer.
Adding a button to the Home tab.
designer.html |
... var designer = new Stimulsoft.Designer.StiDesigner(designerOptions, "StiDesigner", false); designer.renderHtml("content");
//Example add custom button to home toolbar panel var homePanel = designer.jsObject.options.homePanel;
//Add buttons group to insert panel. Parameters of GroupBlock(groupName, groupText) method. var buttonsGroup = designer.jsObject.GroupBlock("buttonsGroup1", "Group1"); var buttonsGroupTable = designer.jsObject.GroupBlockInnerTable(); buttonsGroup.container.appendChild(buttonsGroupTable);
//Add big button to buttons group. Parameters of BigButton(name, groupName, caption, imageName, toolTip, arrow, styles) method. var customBigButton = designer.jsObject.BigButton("customButton1", null, "Custom Button", " ", "Tooltip for customButton1"); customBigButton.image.src = "https://www.stimulsoft.com/images/blocks/ultimate-buttons/logo.png";
buttonsGroupTable.addCell(customBigButton).style.padding = "2px";
//customBigButton onclick event customBigButton.action = function () { alert("customButton was pressed!"); }
//Add buttonsGroup and separator to customPanel homePanel.firstChild.addCell(buttonsGroup); homePanel.firstChild.addCell(designer.jsObject.GroupBlockSeparator()); ... |
Also, you can add a button to the top panel, near the File menu.
designer.html |
... var designer = new Stimulsoft.Designer.StiDesigner(designerOptions, "StiDesigner", false); designer.renderHtml("content");
var toolBarRow = designer.jsObject.options.toolBar.firstChild.tr[0];
var customButton = designer.jsObject.ToolButton("customButton1", "Custom Button");
var buttonCell = document.createElement("td"); buttonCell.className = "stiDesignerToolButtonCell"; buttonCell.appendChild(customButton);
//For example insert button to position 3 toolBarRow.insertBefore(buttonCell, toolBarRow.childNodes[3]);
customButton.action = function () { alert("Button clicked!"); } ... |
Below is an example of adding a custom panel in the report designer.
designer.html |
... var designer = new Stimulsoft.Designer.StiDesigner(designerOptions, "StiDesigner", false); designer.renderHtml("content");
var propertiesPanel = designer.jsObject.options.propertiesPanel;
var customPanel = document.createElement("div"); customPanel.jsObject = designer.jsObject; customPanel.className = "stiDesignerPropertiesPanelInnerContent"; customPanel.style.top = "35px"; customPanel.style.display = "none"; customPanel.style.background = "gray";
propertiesPanel.containers["Custom"] = customPanel; propertiesPanel.appendChild(customPanel);
var footerTable = propertiesPanel.footer.firstChild;
var tabButton = designer.jsObject.TabButton("CustomTabButton", "PropertiesGridTabs", "Custom"); tabButton.style.margin = "0 0 0 3px";
tabButton.action = function () { if (!this.isSelected) propertiesPanel.showContainer("Custom"); }
designer.jsObject.loc.Panels.Custom = "Custom Panel Name"; ... |