Toolbars are a useful addition that allow end-users to manipulate components on a webpage. This tutorial provides step-by-step instructions for adding an open source Ribbon toolbar to an instance of SpreadASP. The toolbar we are using is an open source JQuery ribbon that can be found here: https://www.openhub.net/p/jquery-ui-ribbon. Other ribbons can be used, but this is a simple example to show how we can go about connecting a ribbon to SpreadASP. For a tutorial on adding a ribbon to another Spread project, such as SpreadJS, see here: http://sphelp.grapecity.com/2015/09/16/adding-a-ribbon-to-spreadjs/. Download the source code for this tutorial: SpreadASP Ribbon
Set Up the Project
Start by creating an ASP.NET web application that you will add Spread to. Find instructions here: http://sphelp.grapecity.com/WebHelp/SpreadNet8/ASP2/webframe.html#spweb-startvs2013.html. Set up your project by placing the source code for the Ribbon control linked above in the directory where you created the project. Include these files and folders in your project. Your spreadsheet should look like the one in the screen shot below. 
An ASP page with the Spread Component on it.
Add the Ribbon to Your Page
Add the links to the scripts found in the open source Ribbon you downloaded.
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<link type="text/css" href="../../themes/base/ui.tabs.css" rel="stylesheet" />
<link type="text/css" href="../../style/ui.button.css" rel="stylesheet" />
<link type="text/css" href="../../style/ui.ribbon.css" rel="stylesheet" />
<link type="text/css" href="../../style/ui.orbButton.css" rel="stylesheet" />
<link type="text/css" href="../../style/ui.ribbon.style.msoffice.css" rel="stylesheet" />
<link type="text/css" href="../../style/msoffice-icons.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
<script type="text/javascript" src="../../ui/ui.ribbon.js"></script>
<script type="text/javascript" src="../../ui/ui.orbButton.js"></script>
<script type="text/javascript" src="../../ui/ui.button.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('#log').dblclick(function () { $('#log').empty(); });
$('.ui-button').button({ useSlidingDoors: true });
$('#ribbon-msoffice').wrap('<div class="style-msoffice"></div>');
$('#ribbon, #ribbon-msoffice').ribbon({
collapsible: true
})
});
</script>
Next, set the page to display the ribbon by adding this html code to the body above the SpreadASP component:
<div id="ribbon-msoffice" style="width:700px; border: 1px solid gray">
<div id="ribbon-msofficeContextData" style="display:none;"><label>Data</label></div>
<ul>
<li><a href="#ribbon-msofficeTabHome"><span><label>Home</label></span></a></li>
<li><a href="#ribbon-msofficeTabInsert"><span><label>Insert</label></span></a></li>
<li><a href="#ribbon-msofficeTabView"><span><label>View</label></span></a></li>
</ul>
</div>
You can then add code for each particular button by adding div elements for each tab in the ribbon. When a tab is added, unordered lists within those div elements can be added to represent the sections with buttons:
<div id="ribbon-msofficeTabInsert">
<ul>
<li id="groupSheet_ribbon-msofficeTabInsert">
<div>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="AddSheetButton" runat="server" onserverclick="AddSheetButton_Click"><span class="ui-icon msoffice-icon-menu-new-32x32"></span><span class="ui-button-label">New Sheet</span></button>
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="DeleteSheetButton" runat="server" onserverclick="DeleteSheetButton_Click"><span class="ui-icon msoffice-icon-delete-24x24""></span><span class="ui-button-label">Delete Sheet</span></button>
</div>
<h3><span>Sheet</span></h3>
</li>
</ul>
</div>
The ribbon should now be displayed on the page right above the Spread component, and it should look similar to a ribbon you would see in a Microsoft Office program: 
The finished ASP page with Spread and a Ribbon on it.
Make the Buttons Work with SpreadASP
To add the functionality to these buttons, it must be decided whether the functions can be run in a client-side script or in server-side code. For information about what client-side functions are supported in SpreadASP, see here: http://sphelp.grapecity.com/WebHelp/SpreadNet8/ASP2/webframe.html#clientscript-members.html. If a button can be controlled in a client-side script, you can define the "onclick" attribute of a button like so:
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="PasteButton" onclick="PasteButton_Click();"><span class="ui-icon msoffice-icon-paste-32x32"></span><span class="ui-button-label">Paste</span></button>
The "PasteButton_Click()" function referenced in this button can be defined in the script with Spread:
window.onload = function () {
spread = document.getElementById("<%= FpSpread1.ClientID %>");
}
function PasteButton_Click() {
spread.PasteLikeExcel();
}
Whenever that paste button is clicked, that function in the script will fire on the client-side. To link a button to server-side code, define the “runat” and “onserverclick” attributes of the button like so:
<button class="ui-ribbon-element ui-ribbon-control ui-button ui-ribbon-large-button" id="AddSheetButton" runat="server" onserverclick="AddSheetButton_Click"><span class="ui-icon msoffice-icon-menu-new-32x32"></span><span class="ui-button-label">New Sheet</span></button>
In the code-behind file for the sheet, define the "AddSheetButton_Click" function:
protected void AddSheetButton_Click(object sender, EventArgs e)
{
FpSpread1.Sheets.Add(new FarPoint.Web.Spread.SheetView());
}
Once the code for each button has been written, the ribbon should be connected to the Spread component on an ASP page, and the user can interact with both.
GrapeCity