www.wikipedia.org
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!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@using DevExtreme.NETCore.Demos.Models
@model IEnumerable<CountryPopulationAndGDP>
<div class="long-title"><h3>Country Area, Population, and GDP Structure</h3></div>
@(Html.DevExtreme().DataGrid<CountryPopulationAndGDP>()
.ID("gridContainer")
.DataSource(Model, "ID")
.ColumnAutoWidth(true)
.AllowColumnReordering(true)
.Width("100%")
.ShowBorders(true)
.ColumnChooser(c => c.Enabled(true))
.Columns(c => {
c.AddFor(m => m.Country);
c.AddFor(m => m.Area)
.HeaderCellTemplate(@<text>
<div>Area, km<sup>2</sup></div>
</text>);
c.Add()
.Caption("Population")
.Columns(a => {
a.AddFor(m => m.Population_Total)
.Format(Format.FixedPoint);
a.AddFor(m => m.Population_Urban)
.Format(Format.Percent);
});
c.Add()
.Caption("Nominal GDP")
.Columns(a => {
a.AddFor(m => m.GDP_Total)
.Format(Format.FixedPoint)
.SortOrder(SortOrder.Desc);
a.Add()
.Caption("By Sector")
.Columns(b => {
b.AddFor(m => m.GDP_Agriculture)
.Width(95)
.Format(f => f.Type(Format.Percent).Precision(1));
b.AddFor(m => m.GDP_Industry)
.Width(80)
.Format(f => f.Type(Format.Percent).Precision(1));
b.AddFor(m => m.GDP_Services)
.Width(85)
.Format(f => f.Type(Format.Percent).Precision(1));
});
});
})
)
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 MultiRowHeadersBands() {
return View(SampleData.CountriesPopulationAndGDP);
}
}
}
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<CountryPopulationAndGDP> CountriesPopulationAndGDP = new[] {
new CountryPopulationAndGDP {
ID = 1,
Country = "Brazil",
Area = 8515767,
Population_Urban = 0.85,
Population_Rural = 0.15,
Population_Total = 205809000,
GDP_Agriculture = 0.054,
GDP_Industry = 0.274,
GDP_Services = 0.672,
GDP_Total = 2353025 },
new CountryPopulationAndGDP {
ID = 2,
Country = "China",
Area = 9388211,
Population_Urban = 0.54,
Population_Rural = 0.46,
Population_Total = 1375530000,
GDP_Agriculture = 0.091,
GDP_Industry = 0.426,
GDP_Services = 0.483,
GDP_Total = 10380380 },
new CountryPopulationAndGDP {
ID = 3,
Country = "France",
Area = 675417,
Population_Urban = 0.79,
Population_Rural = 0.21,
Population_Total = 64529000,
GDP_Agriculture = 0.019,
GDP_Industry = 0.183,
GDP_Services = 0.798,
GDP_Total = 2846889 },
new CountryPopulationAndGDP {
ID = 4,
Country = "Germany",
Area = 357021,
Population_Urban = 0.75,
Population_Rural = 0.25,
Population_Total = 81459000,
GDP_Agriculture = 0.008,
GDP_Industry = 0.281,
GDP_Services = 0.711,
GDP_Total = 3859547 },
new CountryPopulationAndGDP {
ID = 5,
Country = "India",
Area = 3287590,
Population_Urban = 0.32,
Population_Rural = 0.68,
Population_Total = 1286260000,
GDP_Agriculture = 0.174,
GDP_Industry = 0.258,
GDP_Services = 0.569,
GDP_Total = 2047811 },
new CountryPopulationAndGDP {
ID = 6,
Country = "Italy",
Area = 301230,
Population_Urban = 0.69,
Population_Rural = 0.31,
Population_Total = 60676361,
GDP_Agriculture = 0.02,
GDP_Industry = 0.242,
GDP_Services = 0.738,
GDP_Total = 2147952 },
new CountryPopulationAndGDP {
ID = 7,
Country = "Japan",
Area = 377835,
Population_Urban = 0.93,
Population_Rural = 0.07,
Population_Total = 126920000,
GDP_Agriculture = 0.012,
GDP_Industry = 0.275,
GDP_Services = 0.714,
GDP_Total = 4616335 },
new CountryPopulationAndGDP {
ID = 8,
Country = "Russia",
Area = 17098242,
Population_Urban = 0.74,
Population_Rural = 0.26,
Population_Total = 146544710,
GDP_Agriculture = 0.039,
GDP_Industry = 0.36,
GDP_Services = 0.601,
GDP_Total = 1857461 },
new CountryPopulationAndGDP {
ID = 9,
Country = "United States",
Area = 9147420,
Population_Urban = 0.81,
Population_Rural = 0.19,
Population_Total = 323097000,
GDP_Agriculture = 0.0112,
GDP_Industry = 0.191,
GDP_Services = 0.797,
GDP_Total = 17418925 },
new CountryPopulationAndGDP {
ID = 10,
Country = "United Kingdom",
Area = 244820,
Population_Urban = 0.82,
Population_Rural = 0.18,
Population_Total = 65097000,
GDP_Agriculture = 0.007,
GDP_Industry = 0.21,
GDP_Services = 0.783,
GDP_Total = 2945146
}
};
}
}
#gridContainer sup {
font-size: 0.8em;
vertical-align: super;
line-height: 0;
}
.long-title {
position: absolute;
top: -5px;
left: 0;
right: 45px;
z-index: 1;
}
.long-title h3 {
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
font-weight: 200;
font-size: 28px;
text-align: center;
margin: 0 0 0 45px;
}
To create the banded layout, do one of the following:
-
Assign a hierarchical structure to the columns property. The code in this demo is an example.
-
Implement a customizeColumns function where you should specify the ownerBand and isBand column properties. Refer to the isBand description for a code sample.