grouping.groupBy : stringDefault: undefined

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>