# spreadsheet-editor-conditional-formatting

> Spreadsheet editor with conditional formatting rules applied to data ranges.

**Framework:** aspnet-core  **Component:** Spreadsheet  **Variant:** conditional-formatting

## 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-core/spreadsheet-editor-conditional-formatting.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.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-conditional-formatting/spreadsheet-editor.cshtml

```cshtml
@using Syncfusion.EJ2

    <div class="control-section">
        <ejs-spreadsheet id="spreadsheet" openUrl="ConditionalFormatOpen" saveUrl="ConditionalFormatSave" created="createdHandler">
            <e-spreadsheet-sheets>
                <e-spreadsheet-sheet name="Inventory List">
                    <e-spreadsheet-rows>
                        <e-spreadsheet-row height=30>
                            <e-spreadsheet-cells>
                                <e-spreadsheet-cell index=1 value="Inventory List"></e-spreadsheet-cell>
                            </e-spreadsheet-cells>
                        </e-spreadsheet-row>
                    </e-spreadsheet-rows>
                    <e-spreadsheet-ranges>
                        <e-spreadsheet-range dataSource="@ViewData["ConditionalFormattingData"]" startCell="A2"></e-spreadsheet-range>
                    </e-spreadsheet-ranges>
                    <e-spreadsheet-conditionalformats>
                        <e-spreadsheet-conditionalformat type="GYRColorScale" range="C3:C18"></e-spreadsheet-conditionalformat>
                        <e-spreadsheet-conditionalformat type="LessThan" cFColor="RedFT" value="8-8-2019" range="G3:G18"></e-spreadsheet-conditionalformat>
                    </e-spreadsheet-conditionalformats>
					<e-spreadsheet-columns>
						<e-spreadsheet-column width="100"></e-spreadsheet-column>
						<e-spreadsheet-column width="158"></e-spreadsheet-column>
						<e-spreadsheet-column width="72"></e-spreadsheet-column>
						<e-spreadsheet-column width="113"></e-spreadsheet-column>
						<e-spreadsheet-column width="113"></e-spreadsheet-column>
						<e-spreadsheet-column width="77"></e-spreadsheet-column>
						<e-spreadsheet-column width="97"></e-spreadsheet-column>
						<e-spreadsheet-column width="73"></e-spreadsheet-column>
					</e-spreadsheet-columns>
                </e-spreadsheet-sheet>
            </e-spreadsheet-sheets>
        </ejs-spreadsheet>
    </div>

<script>
    function createdHandler() {
        var excelObj = this;
        excelObj.merge('A1:H1');
        excelObj.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:H2');
        excelObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle', fontSize: '13pt' }, 'A1:H1');
		excelObj.numberFormat('$#,##0.00', 'D3:F18');
        excelObj.numberFormat('m/d/yyyy', 'G3:G18');
        excelObj.conditionalFormat({ type: 'BlueDataBar', range: 'D3:D18' });
		excelObj.conditionalFormat({ type: 'GreenDataBar', range: 'E3:E18' });
        excelObj.conditionalFormat({ type: 'ThreeStars', range: 'H3:H18' });
		excelObj.conditionalFormat({ type: "Top10Items", value: '1', format: { style: { color: '#ffffff', backgroundColor: '#009999',
            fontWeight: 'bold' } }, range: 'F3:F18' });
		excelObj.conditionalFormat({ type: "Bottom10Items", value: '1', format: { style: { color: '#ffffff', backgroundColor: '#c68d53',
            fontWeight: 'bold' } }, range: 'F3:F18' });
    }
</script>
```

### src/components/spreadsheet-editor-conditional-formatting/spreadsheet-editor.cshtml.cs

```cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using Syncfusion.EJ2.Spreadsheet;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SpreadsheetController : Controller
    {
        public IActionResult ConditionalFormatting()
        {
            List<object> data = new List<object>()
            {
                new { ItemCode="AG940Z",  ItemName="Laser Printer",  Quantity="144",  PurchasePrice="169.50",  SellingPrice="172.00", Profit= "=E3-D3", LastUpdated ="05-25-19",  Rating="4.5" },
                new { ItemCode="BJ120K",  ItemName="Scientific Calculator",  Quantity="116",  PurchasePrice="21.80",  SellingPrice="23.00", Profit= "=E4-D4", LastUpdated="07-28-19",  Rating="4.0" },
                new { ItemCode="BC120M",  ItemName="Wired Keyboard",  Quantity="438",  PurchasePrice="26.80",  SellingPrice="29.00", Profit= "=E5-D5", LastUpdated="03-30-20",  Rating="4.25" },
                new { ItemCode="BS121L",  ItemName="Memory Card",  Quantity="486",  PurchasePrice="23.50",  SellingPrice="25.00", Profit= "=E6-D6", LastUpdated ="08-20-19",  Rating="3.5" },
                new { ItemCode="BU121K",  ItemName="Coffee Maker",  Quantity="176",  PurchasePrice="56.50",  SellingPrice="59.00", Profit= "=E7-D7", LastUpdated ="02-02-20",  Rating="4.5" },
                new { ItemCode="BD121M",  ItemName="Table Lamp",  Quantity="0",  PurchasePrice="22.50",  SellingPrice="25.00", Profit= "=E8-D8", LastUpdated ="11-11-19",  Rating="5.0" },
            };
            ViewData["ConditionalFormattingData"] = data;
            return View();
        }

        public IActionResult ConditionalFormatOpen(IFormCollection openRequest)
        {
            OpenRequest open = new OpenRequest();
            open.File = openRequest.Files[0];
            return Content(Workbook.Open(open));
        }

        public IActionResult ConditionalFormatSave(SaveSettings saveSettings)
        {
            return Workbook.Save(saveSettings);
        }
    }
}
```