Spreadsheet - Full Set of Tools

  • Home
  • Insert
  • Data
  • Undo
  • Redo
  • Save
  • Copy
  • Cut
  • Paste
  • Link
  • 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
  • Delete
  • Hide
  • Delete

Demo Configuration

Operations
Font
Alignment
Number
Window & Editing
Cells
Editing
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb"  Inherits="SpreadSheet.Examples.SpreadSheetToolBar.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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="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="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="HorizontalAling" runat="server" AutoPostBack="true" Checked="true" Text="Horizontal Aling" />
                        </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

Help Us Improve

Was this example helpful?