Backend API
@(Html.DevExtreme().DataGrid<DevExtreme.NETCore.Demos.Models.Customer>()
.ID("gridContainer")
.Columns(columns => {
columns.AddFor(m => m.CompanyName);
columns.AddFor(m => m.Phone);
columns.AddFor(m => m.Fax);
columns.AddFor(m => m.City);
columns.AddFor(m => m.State)
.GroupIndex(0);
})
.AllowColumnReordering(true)
.Width("100%")
.ShowBorders(true)
.Grouping(grouping => grouping.AutoExpandAll(true))
.SearchPanel(searchPanel => searchPanel.Visible(true))
.GroupPanel(groupPanel => groupPanel.Visible(true))
.Paging(paging => paging.PageSize(10))
.Pager(p => p.Visible(true))
.DataSource(d => d.Mvc().Controller("DataGridCustomers").LoadAction("Get").Key("ID"))
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("autoExpand")
.Text("Expand All Groups")
.Value(true)
.OnValueChanged(@<text>
function(data) {
var dataGrid = $("#gridContainer").dxDataGrid("instance");
dataGrid.option("grouping.autoExpandAll", data.value);
}
</text>)
)
</div>
</div>
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 RecordGrouping() {
return View();
}
}
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers {
[Route("api/[controller]")]
public class DataGridCustomersController : Controller {
[HttpGet]
public object Get(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(SampleData.Customers, loadOptions);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class Customer {
public int ID { get; set; }
public string CompanyName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public int Zipcode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public string Website { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Customer> Customers = new[] {
new Customer {
ID = 1,
CompanyName = "Premier Buy",
Address = "7601 Penn Avenue South",
City = "Richfield",
State = "Minnesota",
Zipcode = 55423,
Phone = "(612) 291-1000",
Fax = "(612) 291-2001",
Website = "http =//www.nowebsitepremierbuy.dx"
},
new Customer {
ID = 2,
CompanyName = "ElectrixMax",
Address = "263 Shuman Blvd",
City = "Naperville",
State = "Illinois",
Zipcode = 60563,
Phone = "(630) 438-7800",
Fax = "(630) 438-7801",
Website = "http =//www.nowebsiteelectrixmax.dx"
},
new Customer {
ID = 3,
CompanyName = "Video Emporium",
Address = "1201 Elm Street",
City = "Dallas",
State = "Texas",
Zipcode = 75270,
Phone = "(214) 854-3000",
Fax = "(214) 854-3001",
Website = "http =//www.nowebsitevideoemporium.dx"
},
new Customer {
ID = 4,
CompanyName = "Screen Shop",
Address = "1000 Lowes Blvd",
City = "Mooresville",
State = "North Carolina",
Zipcode = 28117,
Phone = "(800) 445-6937",
Fax = "(800) 445-6938",
Website = "http =//www.nowebsitescreenshop.dx"
},
new Customer {
ID = 5,
CompanyName = "Braeburn",
Address = "1 Infinite Loop",
City = "Cupertino",
State = "California",
Zipcode = 95014,
Phone = "(408) 996-1010",
Fax = "(408) 996-1012",
Website = "http =//www.nowebsitebraeburn.dx"
},
new Customer {
ID = 6,
CompanyName = "PriceCo",
Address = "30 Hunter Lane",
City = "Camp Hill",
State = "Pennsylvania",
Zipcode = 17011,
Phone = "(717) 761-2633",
Fax = "(717) 761-2334",
Website = "http =//www.nowebsitepriceco.dx"
},
new Customer {
ID = 7,
CompanyName = "Ultimate Gadget",
Address = "1557 Watson Blvd",
City = "Warner Robbins",
State = "Georgia",
Zipcode = 31093,
Phone = "(995) 623-6785",
Fax = "(995) 623-6786",
Website = "http =//www.nowebsiteultimategadget.dx"
},
new Customer {
ID = 8,
CompanyName = "EZ Stop",
Address = "618 Michillinda Ave.",
City = "Arcadia",
State = "California",
Zipcode = 91007,
Phone = "(626) 265-8632",
Fax = "(626) 265-8633",
Website = "http =//www.nowebsiteezstop.dx"
},
new Customer {
ID = 9,
CompanyName = "Clicker",
Address = "1100 W. Artesia Blvd.",
City = "Compton",
State = "California",
Zipcode = 90220,
Phone = "(310) 884-9000",
Fax = "(310) 884-9001",
Website = "http =//www.nowebsiteclicker.dx"
},
new Customer {
ID = 10,
CompanyName = "Store of America",
Address = "2401 Utah Ave. South",
City = "Seattle",
State = "Washington",
Zipcode = 98134,
Phone = "(206) 447-1575",
Fax = "(206) 447-1576",
Website = "http =//www.nowebsiteamerica.dx"
},
new Customer {
ID = 11,
CompanyName = "Zone Toys",
Address = "1945 S Cienega Boulevard",
City = "Los Angeles",
State = "California",
Zipcode = 90034,
Phone = "(310) 237-5642",
Fax = "(310) 237-5643",
Website = "http =//www.nowebsitezonetoys.dx"
},
new Customer {
ID = 12,
CompanyName = "ACME",
Address = "2525 E El Segundo Blvd",
City = "El Segundo",
State = "California",
Zipcode = 90245,
Phone = "(310) 536-0611",
Fax = "(310) 536-0612",
Website = "http =//www.nowebsiteacme.dx"
},
new Customer {
ID = 13,
CompanyName = "Super Mart of the West",
Address = "702 SW 8th Street",
City = "Bentonville",
State = "Arkansas",
Zipcode = 72716,
Phone = "(800) 555-2797",
Fax = "(800) 555-2171",
Website = "http://www.nowebsitesupermart.dx"
},
new Customer {
ID = 14,
CompanyName = "Electronics Depot",
Address = "2455 Paces Ferry Road NW",
City = "Atlanta",
State = "Georgia",
Zipcode = 30339,
Phone = "(800) 595-3232",
Fax = "(800) 595-3231",
Website = "http =//www.nowebsitedepot.dx"
},
new Customer {
ID = 15,
CompanyName = "K&S Music",
Address = "1000 Nicllet Mall",
City = "Minneapolis",
State = "Minnesota",
Zipcode = 55403,
Phone = "(612) 304-6073",
Fax = "(612) 304-6074",
Website = "http =//www.nowebsitemusic.dx"
},
new Customer {
ID = 16,
CompanyName = "Tom's Club",
Address = "999 Lake Drive",
City = "Issaquah",
State = "Washington",
Zipcode = 98027,
Phone = "(800) 955-2292",
Fax = "(800) 955-2293",
Website = "http =//www.nowebsitetomsclub.dx"
},
new Customer {
ID = 17,
CompanyName = "E-Mart",
Address = "3333 Beverly Rd",
City = "Hoffman Estates",
State = "Illinois",
Zipcode = 60179,
Phone = "(847) 286-2500",
Fax = "(847) 286-2501",
Website = "http =//www.nowebsiteemart.dx"
},
new Customer {
ID = 18,
CompanyName = "Walters",
Address = "200 Wilmot Rd",
City = "Deerfield",
State = "Illinois",
Zipcode = 60015,
Phone = "(847) 940-2500",
Fax = "(847) 940-2501",
Website = "http =//www.nowebsitewalters.dx"
},
new Customer {
ID = 19,
CompanyName = "StereoShack",
Address = "400 Commerce S",
City = "Fort Worth",
State = "Texas",
Zipcode = 76102,
Phone = "(817) 820-0741",
Fax = "(817) 820-0742",
Website = "http =//www.nowebsiteshack.dx"
},
new Customer {
ID = 20,
CompanyName = "Circuit Town",
Address = "2200 Kensington Court",
City = "Oak Brook",
State = "Illinois",
Zipcode = 60523,
Phone = "(800) 955-2929",
Fax = "(800) 955-9392",
Website = "http =//www.nowebsitecircuittown.dx"
}
};
}
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
To group data, users can drag and drop column headers onto and from the group panel. DataGrid also supports keyboard shortcuts to perform grouping actions:
- Ctrl+G
Move the focused column header to the group panel. - Backspace, Delete, and Ctrl+Shift+G
Remove the focused column header from the group panel. This shortcut is available for items in:- The group panel.
- The column header if showWhenGrouped is enabled.
- Shift+Alt+G
Ungroup all items from the group panel.
To allow users to reorder headers within the group panel, assign true to the allowColumnReordering property. Reordering headers in the group panel changes the component's group hierarchy. Users can reorder headers with mouse drag-and-drop operations or keyboard shortcuts:
- Ctrl/Cmd+Left Arrow
Move the focused header to the left. - Ctrl/Cmd+Right Arrow
Move the focused header to the right.
Grouping and reordering operations are also available in the component's context menu.
To group data against a single column, apply the groupIndex property to it. This property accepts a zero-based index number that controls the column order. In this example, the data is grouped against the State column.
You can also use the grouping object to specify user interaction settings related to grouping. This demo illustrates the autoExpandAll property that specifies whether the groups appear expanded.