Your search did not match any results.

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).

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 .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; }