showHiddenColumnsAsDetails : booleanDefault: false

Automatically adds hidden columns to the details section of the row. This setting works only if the responsive setting is set to true and the detailTemplate is set. You need to set priority and minWidth on the colums, that needs to be hidden in smaller screens.

Examples

Remote Data Source

    
 <table id="grid"></table>
 <script>
     $('#grid').grid({
         dataSource: '/Players/Get',
         detailTemplate: '<div class="row"></div>',
         responsive: true,
         showHiddenColumnsAsDetails: true,
         uiLibrary: 'bootstrap',
         columns: [
             { field: 'ID', width: 34 },
             { field: 'Name', minWidth: 320, priority: 1 },
             { field: 'PlaceOfBirth', minWidth: 320, priority: 2 }
         ]
     });
 </script>

Local Data Source

    
 <table id="grid"></table>
 <script>
     var data = [
         { 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
         { 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
         { 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
     ];
     $('#grid').grid({
         dataSource: data,
         detailTemplate: '<div class="row"></div>',
         responsive: true,
         showHiddenColumnsAsDetails: true,
         uiLibrary: 'bootstrap',
         columns: [
             { field: 'ID', width: 34 },
             { field: 'Name', minWidth: 320, priority: 1 },
             { field: 'PlaceOfBirth', minWidth: 320, priority: 2 }
         ],
         pager: { limit: 2, sizes: [2, 5, 10, 20] }
     });
 </script>