pager.sizes : arrayDefault: [5, 10, 20, 100]

Array that contains the possible page sizes of the grid. When this setting is set, then a drop down with the options for each page size is visualized in the pager.

Examples

Bootstrap 3

    
 <table id="grid"></table>
 <script>
     var grid = $('#grid').grid({
         dataSource: '/Players/Get',
         uiLibrary: 'bootstrap',
         columns: [ { field: 'ID', width: 36 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
         pager: { limit: 2, sizes: [2, 5, 10, 20] }
     });
 </script>

  

Bootstrap 4 FontAwesome

    
 <table id="grid"></table>
 <script>
     var grid = $('#grid').grid({
         dataSource: '/Players/Get',
         uiLibrary: 'bootstrap4',
         iconsLibrary: 'fontawesome',
         columns: [ { field: 'ID', width: 36 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
         pager: { limit: 2, sizes: [2, 5, 10, 20] }
     });
 </script>

  

Bootstrap 4 Material Icons

    
 <table id="grid"></table>
 <script>
     var grid = $('#grid').grid({
         dataSource: '/Players/Get',
         uiLibrary: 'bootstrap4',
         columns: [ { field: 'ID', width: 36 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
         pager: { limit: 2, sizes: [2, 5, 10, 20] }
     });
 </script>

  

Material Design

    
 <table id="grid"></table>
 <script>
     var grid = $('#grid').grid({
         dataSource: '/Players/Get',
         uiLibrary: 'materialdesign',
         columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
         pager: { limit: 2, sizes: [2, 5, 10, 20] }
     });
 </script>