Spreadsheet for ASP.NET Web Forms - How to add a custom ribbon button and modify an active worksheet on its click

This example demonstrates how to add values to spreadsheet cells and clear them when a custom button is clicked.

Implementation Details

1. Invoke the ASPxSpreadsheet designer and click the Create Default Tabs button. The designer creates default ribbon items in your markup.

2. Add a custom tab and group and then implement a RibbonTemplateItem with a button. In the button Click event handler, call the ASPxClientSpreadsheet.PerformCallback method to initiate a server request.

<dx:ASPxSpreadsheet ID="ASPxSpreadsheet1" OnCallback="ASPxSpreadsheet1_Callback" ClientInstanceName="spreadSheet" runat="server" WorkDirectory="~/WorkDirectory">
    <RibbonTabs>
        <dx:RibbonTab Name="Custom" Text="Custom">
            <Groups >
                <dx:RibbonGroup Name="CustomGroup" Text="CustomGroup">                            
                    <Items>                                
                        <dx:RibbonTemplateItem >                                                                                               
                            <Template>                                       
                                <dx:ASPxButton runat="server" ID="btn1"  RenderMode="Link" Text="Send a callback" AutoPostBack="false">
                                    <ClientSideEvents Click="function(s,e){ spreadSheet.PerformCallback('custom'); }" />                                         
                                </dx:ASPxButton>                                            
                            </Template>
                        </dx:RibbonTemplateItem> 
                    </Items>                           
                </dx:RibbonGroup>
            </Groups>
           </dx:RibbonTab>
	    <dx:SRFileTab> 
			<Groups>		
				<dx:SRFileCommonGroup>		
					<Items>		
						<dx:RibbonTemplateItem>		
							<Template>		
								<dx:ASPxButton runat="server" ID="btn2"  RenderMode="Link" Text="Clear cells" AutoPostBack="false">		
									<ClientSideEvents Click="function(s,e){ spreadSheet.PerformCallback('clear'); }" />		
								</dx:ASPxButton>		
							</Template>		
						</dx:RibbonTemplateItem>		
						<dx:SRFileNewCommand>		
						</dx:SRFileNewCommand>		
						...
					</Items>
				</dx:SRFileCommonGroup>
			</Groups>
	    </dx:SRFileTab>		
		....
	</RibbonTabs>
</ASPxSpreadsheet>

3. Modify document in the ASPxSpreadsheet.Callback event handler.

protected void ASPxSpreadsheet1_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e) {
    ASPxSpreadsheet ss = sender as ASPxSpreadsheet;
    Worksheet worksheet = ss.Document.Worksheets.ActiveWorksheet;
    if(e.Parameter == "custom") {
        PrepareTitleRange(worksheet);
        PrepareHeaderCells(worksheet);
        InitializeDataCellsValues(worksheet);
    }
    if(e.Parameter == "clear") {
        worksheet.Clear(worksheet.GetUsedRange());
    }
}

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)