The name of the field that needs to be in use for grouping.
Examples
Local Data
<table id="grid"></table>
<script>
var grid, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria', CountryName: 'Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo LuÃs Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil', CountryName: 'Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England', CountryName: 'England' },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany', CountryName: 'Germany' },
{ 'ID': 5, 'Name': 'James RodrÃguez', 'PlaceOfBirth': 'Cúcuta, Colombia', CountryName: 'Colombia' },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria', CountryName: 'Bulgaria' }
];
$('#grid').grid({
dataSource: data,
grouping: { groupBy: 'CountryName' },
columns: [ { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ]
});
</script>
Remote Data
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
grouping: { groupBy: 'CountryName' },
columns: [ { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ]
});
</script>
Bootstrap 3
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap',
grouping: { groupBy: 'CountryName' },
columns: [ { field: 'Name', sortable: true }, { field: 'DateOfBirth', type: 'date' } ]
detailTemplate: '<div><b>Place Of Birth:</b> {PlaceOfBirth}</div>'
});
</script>
Bootstrap 4
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
grouping: { groupBy: 'CountryName' },
columns: [ { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ]
});
</script>