Search results

toolbarSettings

Properties

items enum

<ts name="ej.ReportDesigner.ToolbarItems"/>

Shows or hides the grouped items in the toolbar with the help of enum ej.ReportDesigner.ToolbarItems.

Name Description
New Creates a new, blank report.
Open Displays the Open dialog box to retrieve an existing report.
Save Saves the active report to a specified location.
Cut Removes the selected item from the active report.
Copy Copies selected text or object to the Report Designer internal clipboard
Paste Pastes the item that cut or copied into (the position of the insertion point) the report from the Report Designer internal clipboard
Delete Deletes the selected item or text from the report.
Undo Reverses the last action or deletes the last entry that is typed.
Redo Reverses the action of the last Undo command.
Zoom Used to “zoom in” to get a close-up view of a report or “zoom out” to see more of the page at a reduced size
Preview Previews the active report in report viewer.
GridLine Enables/Disables the gridline in active report.
Header Enables header area in the report.
Footer Enables footer area in the report.
SendBackward Visually move the selected report item behind its closest intersected report item.
BringForward Visually move the selected report item over its closest intersected report items.
SendToBack Visually move the selected report item behind all other intersected report items.
BringToFront Visually move the selected report item over all other intersected report items.
EditDesign Switches from preview to design view of the report.
All Shows all the toolbar items.

Default Value

  • ej.ReportDesigner.ToolbarItems.All

Examples

  • Show all toolbar items
<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { items: ej.ReportDesigner.ToolbarItems.All }
    });
</script>
  • Hide all toolbar items
<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { items: ~ej.ReportDesigner.ToolbarItems.All }
    });
</script>
  • Hide Footer option from toolbar
<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Footer }
    });
</script>
  • Hide Footer and Header option from toolbar
<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { items: ej.ReportDesigner.ToolbarItems.All & ~ej.ReportDesigner.ToolbarItems.Footer & ~ej.ReportDesigner.ToolbarItems.Header }
    });
</script>

showToolbar boolean

Shows or hides the toolbar.

Default Value

  • true

Examples

  • Show report designer toolbar.
<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { showToolbar: true }
    });
</script>
  • Hide report designer toolbar.
<div id="container"></div>
<script>
    $("#container").ejReportDesigner({
        toolbarSettings: { showToolbar: false }
    });
</script>

templateId string

Specifies the toolbar template ID.

Default Value

  • empty

Examples

<div id="container"></div>
<script>
   $("#container").ejReportDesigner(
       {
           toolbarSettings:{templateId: "customtoolbarId"}
       });
</script>