Data Grid - Overview

DevExtreme ASP.NET MVC DataGrid is a jQuery-based client-side control with a variety of features. The features include data binding to Web API and MVC controllers, record grouping, filtering, sorting, and row selection. DataGrid includes strongly-typed HTML helpers and enables client-side validation based on Data Annotations. You can configure the control with Razor C# syntax.

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.

Thank you for the feedback!

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.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.DataGrid; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DataGridController : Controller { public ActionResult Overview() { return View(); } } }

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