Overview

DevExtreme ASP.NET Core MVC Data Grid is a jQuery-powered responsive grid control. Its key features include: data shaping, data editing and validation, searching and filtering, layout customization, etc. You can choose between Razor C# and Razor VB syntax and use lambda expressions when configuring it. In addition, DevExtreme ASP.NET Core MVC Data Grid can be used in Razor Pages (introduced in .NET Core 2.0).

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

Backend API

@(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d .OData() .Url("https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes") .Key("Id") .BeforeSend(@<text> function(request) { const year = new Date().getFullYear() - 1; request.params.startDate = `${year}-05-10`; request.params.endDate = `${year}-5-15`; } </text>) ) .RemoteOperations(false) .AllowColumnReordering(true) .RowAlternationEnabled(true) .Width("100%") .ShowBorders(true) .OnContentReady("contentReady") .Paging(p => p.PageSize(10)) .Pager(p => p .ShowPageSizeSelector(true) .AllowedPageSizes(new[] { 10, 25, 50, 100 }) ) .SearchPanel(s => s .Visible(true) .HighlightCaseSensitive(true) ) .GroupPanel(g => g.Visible(true)) .Grouping(g => g.AutoExpandAll(false)) .Columns(columns => { columns.Add() .DataField("Product") .GroupIndex(0); columns.Add() .DataField("Amount") .Caption("Sale Amount") .DataType(GridColumnDataType.Number) .Format(Format.Currency) .Alignment(HorizontalAlignment.Right); columns.Add() .DataField("Discount") .Caption("Discount %") .DataType(GridColumnDataType.Number) .Format(Format.Percent) .Alignment(HorizontalAlignment.Right) .AllowGrouping(false) .CssClass("bullet") .CellTemplate(@<text> @(Html.DevExtreme().Bullet() .Value(new JS("value * 100")) .Size(s => s .Height(35) .Width(150) ) .Margin(m => m .Top(5) .Bottom(0) .Left(5) ) .ShowTarget(false) .ShowZeroLevel(true) .StartScaleValue(0) .EndScaleValue(100) .Tooltip(t => t .Enabled(true) .Font(f => f.Size(18)) .PaddingTopBottom(2) .CustomizeTooltip("customizeTooltip") ) ) </text>); columns.Add() .DataField("SaleDate") .DataType(GridColumnDataType.Date); columns.Add() .DataField("Region") .DataType(GridColumnDataType.String); columns.Add() .DataField("Sector") .DataType(GridColumnDataType.String); columns.Add() .DataField("Channel") .DataType(GridColumnDataType.String); columns.Add() .DataField("Customer") .DataType(GridColumnDataType.String) .Width(150); }) ) <script> var collapsed = false; function contentReady(e) { if(!collapsed) { collapsed = true; e.component.expandRow(["EnviroCare"]); } } function customizeTooltip(pointsInfo) { return { text: parseInt(pointsInfo.originalValue) + "%" }; } </script>

using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.DataGrid; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class DataGridController : Controller { public ActionResult Overview() { return View(); } } }

.dx-datagrid .dx-data-row > td.bullet { padding-top: 0; padding-bottom: 0; }