ASP.NET Document Viewer
Edit Viewer Toolbar Commands

RasterEdge web document viewer control for .NET allows C# users to customize commands of viewer toolbar. In general, C# users are able to add new tab, delete existing tab, and change the order of added tabs. Certainly, command under a tab is also user-defined in your HTML5 document viewer. In the following parts, you will get to know how to perform toolbar commands customization detailedly.

C# HTML5 Viewer: Add a New Command Tab

This example will tell you how to add a new command tab to your C# web document viewer toolbar.

var TabName = new ToolbarTab(TabTitle);
var _userCmd = new UserCommand(CommandName);
var commandDom = <div id=test>Test</div>;
_userCmd.addHtmlDOM(commandDom);
TabName.addCommand(_userCmd);
_viewerTopToolbar.addTab(TabName);

C# HTML5 Viewer: Delete Existing Command Tab

There are two methods in all to delete command tab from your viewer toolbar. The first one is by commenting out the respective code. For example, if redaction is not needed in created web viewer, you may do like below.

// _viewerTopToolbar.addTab(_tabRedact);
// _tabSignature.addCommand(new RECommand(Freehand));

The second method is to use corresponding remove command. See demo code as below.

_viewerTopToolbar.removeTab(_tabRedact);
_tabSignature.removeCommand(Text);

C# HTML5 Viewer: Change the Order of Command Tabs

In your C# web viewing project, the order of toolbar tabs are determined when creating tabs in _viewerTopToolbar. That is to say, if you are in need of moving a tab in front of another one, you may directly use _viewerTopToolbar.addTab to add and create command tabs orderly. This principle also applies equally to changing tabs order.

There's an exception that four tabs, namely File, Annotation, Signature, and Redact, are originally set by RasterEdge XDoc.HTML5 Viewer, so that all included information like TabTiltle and Command Name cannot be changed in your C# web application.

To help C# users have quick evaluation, we provide sample files for how to add new tab and all supported commands in free trial package. You may also refer to steps below.

Create a new Tab.

var _tabDemoFiles = new ToolbarTab("Sample Files");

Create a new UserCommand.

var _userCmdDemoPdf = new UserCommand("pdf");

  ID and Events take RE default.

// Set background image color, width and height via addCSS.
_userCmdDemoPdf.addCSS(new customStyle({background:"url('RasterEdge_Resource_Files/images/demo.png') no-repeat 0px 0px",
 width:"31px",height:"40px",marginRight:"15px"}));

// Add the paramter that is sent to page via an asynchronous request.
_userCmdDemoPdf.addParameter(new customCmd({RECommand:"userDefined",FileName:"/RasterEdge_Demo_Docs/pdf/demo_1.pdf"}));

  Custom ID and Event. But you should define the event in customViewer.js and define style in RasterEdge.css.

// Add an Id for this button icon.
_userCmdDemoPdf.addId(_pdf);

// Add an event for this button icon. pdfClickEvent is an user-defined event.
_userCmdDemoPdf.addEvent(pdfClickEvent);

  In addition to the div element, if you need button, input, checkbox..., you can call addHtmlDOM().

// Define icon.
var pdfHtmlDom = <div id= style= click=></div>;

// Add icon.
_userCmdDemoPdf.addHtmlDOM(pdfHtmlDom);

Add UserCommand under the created Tab.

_tabDemoFiles.addCommand(_userCmdDemoPdf);

Add the new Tab to toolbar.

_viewerTopToolbar.addTab(_tabDemoFiles);