Data Grid - Overview

DevExtreme ASP.NET Core Data Grid is a jQuery-powered responsive grid component. Its key features include data shaping, data editing and validation, searching and filtering, layout customization, and so on. You can configure each component with Razor C# syntax to use them in Razor Pages.

Backend API

@(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d .OData() .Version(2) .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 .Visible(true) .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; }