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>