How to customize Page size selector using Devextreme DataGrid

|
| By Webner

Pagination is the default feature of Devextreme. The pagination divides your lots of records into pages and you can show numbers of records on a single page.
Under pagination, Devextreme provides lots of features. As we can see in the following image

devextreme

In this article, we will cover how to customize “Page Size Selector” properties.
Sometimes, we need to show the page size selector option according to the number of rows in the DataGrid.
Assume that you want to show the Page Size Selector option according to the number of rows in the grid.
Assume that we want to show the Page Size Selector option in the following conditions:

  1. If the total number of rows 5 or less than 5 then the Page Size Selector should not be shown in the grid
  2. If the total number of rows gt than 5 and less than or equal to 10 then Page Size Selector should be shown only [5 10] in the grid
  3. If the total number of rows is greater than 10 then Page Size Selector should be [5 10 20] in the grid.

For that condition, we can create the common function and pass the grid id in this function in which grid you want to apply the function.
After that this function name call in the onContentReady function of DataGrid. We can see this in the following code:
Jquery code
$(function(){
$("#gridContainer").dxDataGrid({
paging: { pageSize: 10 },
pager: { showPageSizeSelector: true, },
onContentReady: function (e){
var gridId = 'gridContainer';
customPageSelector(gridId);
}
});
function customPageSelector(gridId) {
var gridInstance = $('#' + gridId).dxDataGrid('instance');
var totalNoOfRow = gridInstance.totalCount();
if (totalNoOfRow <= 5) { $("#" + gridId).dxDataGrid("instance").option('pager.visible',false); } else if (5 < totalNoOfRow && totalNoOfRow <= 10) { $("#" + gridId).dxDataGrid("instance").option('pager.visible', true); $("#" + gridId).dxDataGrid("instance").option('pager.allowedPageSizes', [5, 10]); } else if (10 < totalNoOfRow) { $("#" + gridId).dxDataGrid("instance").option('pager.visible', true); $("#" + gridId).dxDataGrid("instance").option('pager.allowedPageSizes', [5, 10, 20]); } } });

  1. If numbers of rows 5 or less the 5
    devextreme1
  2. If numbers of rows gt than 5 or less than 10
    devextreme2
  3. If number of rows gt than 10
    devextreme3

Leave a Reply

Your email address will not be published. Required fields are marked *