New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Full Set of Tools

  • Home
  • Insert
  • Data
  • Open...
  • Export...
  • Undo
  • Redo
  • Save
  • Copy
  • Cut
  • Paste
  • Link
  • Insert Comment
  • Insert image
  • Bold
  • Italic
  • Underline
  • Arial
  • Pick Color(Current Color is blank)
  • Pick Color(Current Color is blank)
  • All borders
    • All borders
    • Inside borders
    • Inside horizontal borders
    • Inside vertical borders
    • Outside borders
    • Left border
    • Top border
    • Right border
    • Bottom border
    • No border
  • Pick Color(Current Color is blank)
  • Horizontal alignment
    • Align Left
    • Align Center
    • Align Right
    • Justify
  • Vertical alignment
    • Align Top
    • Align Middle
    • Align Bottom
  • Wrap text
  • Merge Cells
    • Merge Cells
    • Merge Horizontally
    • Merge Vertically
    • Unmerge
  • Format
    • Automatic
    • Number
    • Percent
    • Financial
    • Currency
    • Date
    • Time
    • Date time
    • Duration
    • More formats...
  • Increase decimal
  • Decrease decimal
  • Toggle gridlines
  • Freeze panes
    • Freeze panes
    • Freeze rows
    • Freeze columns
    • Unfreeze panes
  • Filter
  • Add column left
    • Add column left
    • Add column right
    • Add row above
    • Add row below
  • Delete cells
    • Delete column
    • Delete row
  • Sort range A to Z
    • Sort range A to Z
    • Sort range Z to A
  • Filter
  • Data Validation
  • Cut
  • Copy
  • Paste
  • Hide
  • Unhide
  • Delete
  • Hide
  • Unhide
  • Delete
  • Demo Configuration
  • ToolbarTab Home
  • ToolbarTab Insert
  • ToolbarTab Data
Operations
Font
Alignment
Number
Window & Editing
Cells
Editing

This demo provides you the ability to configure the visibility of the different built-in toolbar options of the spreadsheet control. Just check of uncheck the desired option from the Configuration menu to show or hide it.

Note the Save button functionality, which allows you to apply the changes performed on the data, directly to the datasource that the control is supplied with.

R1 2020 SP1 release introduces 4 new built-in toolbar options: Open, ExportAs, InsertImage and InsertComment.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SpreadSheet.Examples.SpreadSheetToolBar.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container no-bg">
        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1" Height="600px">
        </telerik:RadSpreadsheet>
    </div>
    <telerik:RadAjaxLoadingPanel runat="Server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSpreadsheet1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Configuratorpanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Demo Configuration">
        <Views>
            <qsf:View ID="HomeView" Title="ToolbarTab Home" runat="server">
                <qsf:ConfiguratorColumn ID="Operations" runat="server" Size="Narrow" Title="Operations">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="Open" runat="server" AutoPostBack="true" Checked="true" Text="Open" CssClass="new" />
                        </li>
                        <li>
                            <asp:CheckBox ID="ExportAs" runat="server" AutoPostBack="true" Checked="true" Text="Export as" CssClass="new" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Undo" runat="server" AutoPostBack="true" Checked="true" Text="Undo" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Redo" runat="server" AutoPostBack="true" Checked="true" Text="Redo" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Save" runat="server" AutoPostBack="true" Checked="true" Text="Save" />
                        </li>
                        <li>
                            <asp:CheckBox ID="InsertComment" runat="server" AutoPostBack="true" Checked="true" Text="Insert Comment" CssClass="new" />
                        </li>
                        <li>
                            <asp:CheckBox ID="InsertImage" runat="server" AutoPostBack="true" Checked="true" Text="Insert Image" CssClass="new" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Copy" runat="server" AutoPostBack="true" Checked="true" Text="Copy" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Cut" runat="server" AutoPostBack="true" Checked="true" Text="Cut" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Paste" runat="server" AutoPostBack="true" Checked="true" Text="Paste" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Hyperlink" runat="server" AutoPostBack="true" Checked="true" Text="Hyperlink" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="Font" runat="server" Size="Narrow" Title="Font">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="Bold" runat="server" AutoPostBack="true" Checked="true" Text="Bold" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Italic" runat="server" AutoPostBack="true" Checked="true" Text="Italic" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Underline" runat="server" AutoPostBack="true" Checked="true" Text="Underline" />
                        </li>
                        <li>
                            <asp:CheckBox ID="FontFamily" runat="server" AutoPostBack="true" Checked="true" Text="FontFamily" />
                        </li>
                        <li>
                            <asp:CheckBox ID="FontSize" runat="server" AutoPostBack="true" Checked="true" Text="FontSize" />
                        </li>
                        <li>
                            <asp:CheckBox ID="BackgroundColor" runat="server" AutoPostBack="true" Checked="true" Text="BackgroundColor" />
                        </li>
                        <li>
                            <asp:CheckBox ID="TextColor" runat="server" AutoPostBack="true" Checked="true" Text="Text Color" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Borders" runat="server" AutoPostBack="true" Checked="true" Text="Borders" />
                        </li>
                        <li>
                            <asp:CheckBox ID="BorderColor" runat="server" AutoPostBack="true" Checked="true" Text="Border Color" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="Alignment" runat="server" Size="Narrow" Title="Alignment">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="HorizontalAlign" runat="server" AutoPostBack="true" Checked="true" Text="Horizontal Align" />
                        </li>
                        <li>
                            <asp:CheckBox ID="VerticalAlign" runat="server" AutoPostBack="true" Checked="true" Text="Vertical Align" />
                        </li>
                        <li>
                            <asp:CheckBox ID="WrapText" runat="server" AutoPostBack="true" Checked="true" Text="Wrap Text" />
                        </li>
                        <li>
                            <asp:CheckBox ID="MergeCells" runat="server" AutoPostBack="true" Checked="true" Text="Merge Cells" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="Number" runat="server" Size="Narrow" Title="Number">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="MoreFormats" runat="server" AutoPostBack="true" Checked="true" Text="More Formats" />
                        </li>
                        <li>
                            <asp:CheckBox ID="IncreaseDecimal" runat="server" AutoPostBack="true" Checked="true" Text="Increase Decimal" />
                        </li>
                        <li>
                            <asp:CheckBox ID="DecreaseDecimal" runat="server" AutoPostBack="true" Checked="true" Text="Decrease Decimal" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="WindowAndEditing" runat="server" Size="Narrow" Title="Window & Editing">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="Gridlines" runat="server" AutoPostBack="true" Checked="true" Text="Gridlines" />
                        </li>
                        <li>
                            <asp:CheckBox ID="FreezePanes" runat="server" AutoPostBack="true" Checked="true" Text="Freeze Panes" />
                        </li>

                        <li>
                            <asp:CheckBox ID="Filter" runat="server" AutoPostBack="true" Checked="true" Text="Filter" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View ID="InsertView" Title="ToolbarTab Insert " runat="server">
                <qsf:ConfiguratorColumn ID="Cells" runat="server" Size="Narrow" Title="Cells">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="Insert" runat="server" AutoPostBack="true" Checked="true" Text="Insert" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Delete" runat="server" AutoPostBack="true" Checked="true" Text="Delete" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View ID="DatView" Title="ToolbarTab Data" runat="server">
                <qsf:ConfiguratorColumn ID="Editing" runat="server" Size="Narrow" Title="Editing">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="Sort" runat="server" AutoPostBack="true" Checked="true" Text="Sort" />
                        </li>
                        <li>
                            <asp:CheckBox ID="EditingFilter" runat="server" AutoPostBack="true" Checked="true" Text="Filter" />
                        </li>
                        <li>
                            <asp:CheckBox ID="Validation" runat="server" AutoPostBack="true" Checked="true" Text="Validation" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance