# grid-default

> Data grid with paging, sorting, Excel-style filtering, and inline add/edit/delete.

**Framework:** aspnet-core  **Component:** Grid  **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-core/grid-default.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.Grid
```

**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/grid-default/grid.cshtml

```cshtml
@page
@model EJ2CoreSampleBrowser.Pages.Grid.DefaultFunctionalitiesModel

<div class="control-section">
    <ejs-grid id="Grid" dataSource="@Model.DataSource" allowPaging="true" allowSorting="true" allowFiltering="true"
              toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">
        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
        <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right"
                           validationRules="@(new { required = true, number = true })" width="180"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required = true })"
                           width="150"></e-grid-column>
            <e-grid-column field="OrderDate" headerText=" Order Date" format="yMd" editType="datepickeredit"
                           width="130"></e-grid-column>
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
            <e-grid-column field="ShippedDate" headerText="Shipped Date" format="yMd" editType="datepickeredit"
                           width="140"></e-grid-column>
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>

        </e-grid-columns>
    </ejs-grid>
</div>

```

### src/components/grid-default/grid.cshtml.cs

```cs
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace EJ2CoreSampleBrowser.Pages.Grid;

public class DefaultFunctionalitiesModel : PageModel
{
    public List<OrdersDetails> DataSource { get; set; }

    public void OnGet()
    {
        DataSource = OrdersDetails.GetAllRecords();
    }
}

public class OrdersDetails
{
    public OrdersDetails()
    {

    }
    public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
    {
        this.OrderID = OrderID;
        this.CustomerID = CustomerId;
        this.EmployeeID = EmployeeId;
        this.Freight = Freight;
        this.ShipCity = ShipCity;
        this.Verified = Verified;
        this.OrderDate = OrderDate;
        this.ShipName = ShipName;
        this.ShipCountry = ShipCountry;
        this.ShippedDate = ShippedDate;
        this.ShipAddress = ShipAddress;
    }
    public static List<OrdersDetails> GetAllRecords()
    {
        List<OrdersDetails> order = new List<OrdersDetails>();
        int code = 10000;
        for (int i = 1; i < 10; i++)
        {
            order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15, 10, 40, 00), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
            order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04, 09, 30, 00), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
            order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30, 03, 45, 00), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
            order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22, 07, 30, 00), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
            order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18, 05, 50, 00), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
            code += 5;
        }
        return order;
    }

    public int? OrderID { get; set; }
    public string CustomerID { get; set; }
    public int? EmployeeID { get; set; }
    public double? Freight { get; set; }
    public string ShipCity { get; set; }
    public bool Verified { get; set; }
    public DateTime OrderDate { get; set; }

    public string ShipName { get; set; }

    public string ShipCountry { get; set; }

    public DateTime ShippedDate { get; set; }
    public string ShipAddress { get; set; }
}
```