Table of Contents
Table of Contents
Implementing Paging

Paging In Client Mode

To enable paging, the following properties must be set correctly:

Property Remarks
AllowPaging AllowPaging must be set true to enable paging.
PageSize PageSize specifies how many rows are displayed per page. The default page size is 20. It may need to be adjusted to fit your design.
ScrollBars Sometimes it is not desired to have scroll bars when paging is enabled. Set ScrollBars to None to disable scroll bars.
That's all needed to support paging in client mode. A few more tasks are needed on the server mode.

Paging in Server Mode or Callback Mode

Only data for the current page are downloaded to the client side at server mode or callback mode. To support paging in these modes, in addition to setting AllowPaging, PageSize and ScrollBars listed above, you also need to:

  • Set the RecordCount property. This property specify the total number of records available, not the total numbef of records currently displayed. EO.Web Grid uses this property to calculate the total number of pages.
  • Handle PageIndexChanged event on the server side. When user navigates to another page, this event is called and your code should repopulate the current page. See here for sample code about how to populate the current page.

While paging in client mode merely provides an easier way for user to navigate, paging in server mode's true purpose is to restrict the amount of data to be fetched from the data source and transfered to the client. Your code that populates the grid should only acquire data for the current page from the data source.

Customize Pager

When paging is enabled, the Grid displays a pager at the bottom of the data grid. These properties can be used to customize the pager:

Property Remarks
FirstPageButtonHtml Gets or sets the HTML for the pager button that would navigate to the first page.
LastPageButtonHtml Gets or sets the HTML for the pager button that would navigate to the last page.
PrevPageButtonHtml Gets or sets the HTML for the pager button that would navigate to the previous page.
NextPageButtonHtml Gets or sets the HTML for the pager button that would navigate to the next page.
PageButtonFormat Gets or sets the format string used to create the HTML text for pager buttons that would navigate to each individual page.
CurrentPageButtonFormat Gets or sets the format string used to create the HTML text for pager buttons that represents the current page.
FooterStyle Gets or sets the style to be applied to the entire footer area.
GoToBoxStyle Gets or sets the style to be applied to the text box where user can enter a target page number directly.
GoToBoxVisible Gets or sets a value indicating whether to display a text box with which user can enter a target page number directly.
GoToButtonText Gets or sets the text for the button displayed right to the textbox where user can directly enter a target page number.
GoToLabelText Gets or sets the text to be displayed left to the textbox where user can directly enter a target page number.
PagerSize Gets or sets the number of pages the pager displays.
PageSize Gets or sets the number of items displayed per page.