# spreadsheet-editor-default

> Spreadsheet editor with formula, number formatting, row/column configuration, and styled header/footer rows.

**Framework:** aspnet-mvc  **Component:** Spreadsheet  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/aspnet-mvc/spreadsheet-editor-default.json
```

**Install Package(s)**

```bash
Install-Package Syncfusion.AspNetMvc.Spreadsheet
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/spreadsheet-editor-default/DefaultFunctionalities.cshtml

```cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Spreadsheet

@section ControlsSection{
    <div class="control-section">
        @Html.EJS().Spreadsheet("spreadsheet").OpenUrl("Open").SaveUrl("Save").Created("createdHandler").Sheets(sheet =>
   {
       sheet.Name("Car Sales Report").Ranges(ranges =>
       {
           ranges.DataSource((IEnumerable<object>)ViewData["DefaultData"]).Add();
       }).Rows(row => {
           row.Cells(cell =>
           {
               cell.Value("Customer Name").Add();
               cell.Index(3).Value("Payment Mode").Add();
               cell.Value("Delivery Date").Add();
           }).Add();
           row.Index(30).Cells(cell =>
           {
               cell.Index(4).Value("Total Amount:").Style(new SpreadsheetCellStyle() { FontWeight = FontWeight.Bold, TextAlign = TextAlign.Right }).Add();
               cell.Formula("=SUM(F2:F30)").Style(new SpreadsheetCellStyle() { FontWeight = FontWeight.Bold }).Add();
           }).Add();
       }).Columns(column =>
       {
           column.Width(180).Add();
           column.Width(130).Add();
           column.Width(130).Add();
           column.Width(180).Add();
           column.Width(130).Add();
           column.Width(120).Add();
       }).Add();
   }).Render()
    </div>
}

@section Meta{
    <meta name="description" content="Explore the ASP.NET MVC Spreadsheet Default Features demo. Perform Excel-like editing, formulas, formatting, data binding, and import/export using Syncfusion's spreadsheet editor." />

    <!-- SoftwareApplication Schema -->
    <script type="application/ld+json">
    {
      "@@context": "https://schema.org",
      "@@type": "SoftwareApplication",
      "name": "ASP.NET MVC Spreadsheet Default Features",
      "applicationCategory": "WebApplication",
      "operatingSystem": "Any",
      "description": "Demo showcasing default Excel-like functionalities in Syncfusion's ASP.NET MVC Spreadsheet, including editing, formulas, formatting, and file import/export.",
      "url": "https://document.syncfusion.com/demos/spreadsheet-editor/asp-net-mvc/spreadsheet/defaultfunctionalities",
      "publisher": {
        "@@type": "Organization",
        "name": "Syncfusion",
        "url": "https://www.syncfusion.com"
      }
    }
    </script>

    <!-- WebPage Schema -->
    <script type="application/ld+json">
    {
      "@@context": "https://schema.org",
      "@@type": "WebPage",
      "name": "ASP.NET MVC Spreadsheet Default Features - Online Demo",
      "url": "https://document.syncfusion.com/demos/spreadsheet-editor/asp-net-mvc/spreadsheet/defaultfunctionalities",
      "description": "Online demo illustrating default spreadsheet features such as editing, formulas, formatting, and data manipulation in ASP.NET MVC.",
      "isPartOf": {
        "@@type": "WebSite",
        "name": "Syncfusion Document Solutions",
        "url": "https://document.syncfusion.com/"
      }
    }
    </script>

    
<!-- Breadcrumb Schema -->
    <script type="application/ld+json">
    {
      "@@context": "https://schema.org",
      "@@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://document.syncfusion.com/"
        },
        {
          "@@type": "ListItem",
          "position": 2,
          "name": "Spreadsheet Editor",
          "item": "https://document.syncfusion.com/spreadsheet-editor/"
        },
        {
          "@@type": "ListItem",
          "position": 3,
          "name": "ASP.NET MVC",
          "item": "https://document.syncfusion.com/demos/spreadsheet-editor/asp-net-mvc/"
        },
        {
          "@@type": "ListItem",
          "position": 4,
          "name": "Spreadsheet",
          "item": "https://document.syncfusion.com/demos/spreadsheet-editor/asp-net-mvc/spreadsheet/"
        },
        {
          "@@type": "ListItem",
          "position": 5,
          "name": "Default Functionalities"
        }
      ]
    }
    </script>
}
     

<script>
    // Triggers once the control is loaded
    function createdHandler() {
        // Applies cell and number formatting to specified range of the active sheet
        this.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
        // Apply format to the specified range in the active sheet.
        this.numberFormat('$#,##0.00', 'F2:F31');
        this.numberFormat('m/d/yyyy', 'E2:E30');
    }
</script>

@*custom code start*@
<style>
    .control-section {
        height: 550px;
    }
    #sb-content .e-spreadsheet .e-tab .e-tab-text {
        display: inherit;
    }
</style>
```

### src/components/spreadsheet-editor-default/DefaultFunctionalitiesController.cs

```cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Spreadsheet;

namespace EJ2MVCSampleBrowser.Controllers.Spreadsheet
{
    public partial class SpreadsheetController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
           List<object> data = new List<object>()
            {
                new { CustomerName= "Romona Heaslip",  Model= "Taurus",  Color= "Aquamarine",  PaymentMode= "Debit Card",  DeliveryDate= "07-11-2015",  Amount= "8529.22" },
                new { CustomerName= "Clare Batterton",  Model= "Sparrow",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "07-13-2016",  Amount= "17866.19" },
                new { CustomerName= "Eamon Traise",  Model= "Grand Cherokee",  Color= "Blue",  PaymentMode= "Net Banking",  DeliveryDate= "09-04-2015",  Amount= "13853.09" },
                new { CustomerName= "Julius Gorner",  Model= "GTO",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12-15-2017",  Amount= "2338.74" },
                new { CustomerName= "Jenna Schoolfield",  Model= "LX",  Color= "Yellow",  PaymentMode= "Credit Card",  DeliveryDate= "10-08-2014",  Amount= "9578.45" },
                new { CustomerName= "Marylynne Harring",  Model= "Catera",  Color= "Green",  PaymentMode= "Cash On Delivery",  DeliveryDate= "07-01-2017",  Amount= "19141.62" },
                new { CustomerName= "Vilhelmina Leipelt",  Model= "7 Series",  Color= "Goldenrod",  PaymentMode= "Credit Card",  DeliveryDate= "12-20-2015",  Amount= "6543.30" },
                new { CustomerName= "Barby Heisler",  Model= "Corvette",  Color= "Red",  PaymentMode= "Credit Card",  DeliveryDate= "11-24-2014",  Amount= "13035.06" },
                new { CustomerName= "Karyn Boik",  Model= "Regal",  Color= "Indigo",  PaymentMode= "Debit Card",  DeliveryDate= "05-12-2014",  Amount= "18488.80" },
                new { CustomerName= "Jeanette Pamplin",  Model= "S4",  Color= "Fuscia",  PaymentMode= "Net Banking",  DeliveryDate= "12-30-2014",  Amount= "12317.04" },
                new { CustomerName= "Cristi Espinos",  Model= "TL",  Color= "Aquamarine",  PaymentMode= "Credit Card",  DeliveryDate= "12-18-2013",  Amount= "6230.13" },
                new { CustomerName= "Issy Humm",  Model= "Club Wagon",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "02-02-2015",  Amount= "9709.49" },
                new { CustomerName= "Tuesday Fautly",  Model= "V8 Vantage",  Color= "Crimson",  PaymentMode= "Debit Card",  DeliveryDate= "11-19-2014",  Amount= "9766.10" },
                new { CustomerName= "Rosemaria Thomann",  Model= "Caravan",  Color= "Violet",  PaymentMode= "Net Banking",  DeliveryDate= "02-08-2014",  Amount= "7685.49" },
                new { CustomerName= "Lyell Fuentez",  Model= "Bravada",  Color= "Violet",  PaymentMode= "Debit Card",  DeliveryDate= "08-05-2016",  Amount= "18012.45" },
                new { CustomerName= "Raynell Layne",  Model= "Colorado",  Color= "Pink",  PaymentMode= "Credit Card",  DeliveryDate= "05-30-2016",  Amount= "2785.49" },
                new { CustomerName= "Raye Whines",  Model= "4Runner",  Color= "Red",  PaymentMode= "Debit Card",  DeliveryDate= "12-10-2016",  Amount= "9967.74" },
                new { CustomerName= "Virgina Aharoni",  Model= "TSX",  Color= "Pink",  PaymentMode= "Cash On Delivery",  DeliveryDate= "10-23-2014",  Amount= "5584.33" },
                new { CustomerName= "Peta Cheshir",  Model= "Pathfinder",  Color= "Red",  PaymentMode= "Net Banking",  DeliveryDate= "12-24-2015",  Amount= "5286.53" },
                new { CustomerName= "Jule Urion",  Model= "Charger",  Color= "Violet",  PaymentMode= "Debit Card",  DeliveryDate= "11-20-2013",  Amount= "13511.91" },
                new { CustomerName= "Lew Gilyatt",  Model= "Bonneville",  Color= "Crimson",  PaymentMode= "Credit Card",  DeliveryDate= "11-19-2013",  Amount= "6498.19" },
                new { CustomerName= "Jobey Fortun",  Model= "B-Series",  Color= "Blue",  PaymentMode= "Net Banking",  DeliveryDate= "10-30-2014",  Amount= "10359.67" },
                new { CustomerName= "Blondie Crump",  Model= "Voyager",  Color= "Turquoise",  PaymentMode= "Credit Card",  DeliveryDate= "04-06-2018",  Amount= "8118.39" },
                new { CustomerName= "Florentia Binns",  Model= "Grand Prix",  Color= "Orange",  PaymentMode= "Cash On Delivery",  DeliveryDate= "10-13-2016",  Amount= "10204.37" },
                new { CustomerName= "Jaquelin Galtone",  Model= "Sunbird",  Color= "Red",  PaymentMode= "Net Banking",  DeliveryDate= "10-22-2013",  Amount= "6528.06" },
                new { CustomerName= "Hakeem Easseby",  Model= "Mirage",  Color= "Crimson",  PaymentMode= "Debit Card",  DeliveryDate= "09-12-2014",  Amount= "5619.25" },
                new { CustomerName= "Nickolaus Gidman",  Model= "XK",  Color= "Orange",  PaymentMode= "Debit Card",  DeliveryDate= "05-12-2016",  Amount= "5091.43" },
                new { CustomerName= "Jenine Iglesia",  Model= "Accord",  Color= "Orange",  PaymentMode= "Debit Card",  DeliveryDate= "09-03-2018",  Amount= "14566.08" },
                new { CustomerName= "Fax Witherspoon",  Model= "Range Rover Sport",  Color= "Orange",  PaymentMode= "Credit Card",  DeliveryDate= "02-22-2018",  Amount= "5284.87" }
            };
            ViewData["DefaultData"] = data;
            return View();
        }

        public ActionResult Open(OpenRequest openRequest)
        {
            return Content(Workbook.Open(openRequest));
        }

        public void Save(SaveSettings saveSettings)
        {
            if (saveSettings != null && saveSettings.JSONData != null)
            {
                Workbook.Save(saveSettings);
            }
        }
    }
}
```