Grid Paging

Smart.Grid allows you to split rows into multiple pages. It also provides a built-in customizable navigation menu to navigate between pages.

The behavior of the paging functionality is mainly described inside the GridPaging and GridPager functions

GridPager describes the customization options of the pager, such as Visibility, Position, NavigationButtons and many more

GridPaging describes the functionality settings of the pager, such as Enabled, PageSize, PageIndex and many more

@inject WeatherForecastService ForecastService

<Grid @ref="grid" DataSource="@forecast" Paging="@paging" Pager="@pager">
  <Columns>
      <Column DataField="Date" Label="Date" DataType="date" CellsFormat="M"></Column>
      <Column DataField="TemperatureC" Label="Temp. (C)"></Column>
      <Column DataField="TemperatureF" Label="Temp. (F)"></Column>
      <Column DataField="Summary" Label="Summary"></Column>
  </Columns>
</Grid>

@code {
  Grid grid;

  GridPaging paging = new GridPaging() 
  { 
      Enabled = true,
      PageSize = 10,
      PageIndex = 0
  };
  
  GridPager pager = new GridPager() { 
      Visible = true,
      Position = LayoutPosition.Far,
      NavigationInput = new GridPagerNavigationInput(){
          Visible = true
      },
  };

  private WeatherForecast[] forecast;

  protected override async Task OnInitializedAsync()
  {
      forecast = await ForecastService.GetForecastAsync(DateTime.Now);
  }
}

GridPager

The GridPager object has the following properties:

• AutoEllipsis - sets the ellipsis display mode
  Accepts GridPagerAutoEllipsis.Both(default) | None | Before | After
• Position - sets the position of pager
  Accepts LayoutPosition.Far(default) | Near
• Template - sets a template for the pager
  Accepts object - default: ""
• PageSizeSelector - describes the settings for the 'rows per page' option
  Accepts GridPagerPageSizeSelector() object
• Summary - describes the summary settings
  Accepts GridPagerSummary() object
• NavigationButtons - describes the navigation buttons settings
  Accepts GridPagerNavigationButtons() object
• NavigationInput - describes the settings about navigation input option
  Accepts GridPagerNavigationInput() object
• PageIndexSelectors - describes the settings for the numeric page buttons
  Accepts GridPagerPageIndexSelectors() object
• Visible - sets the visibility of pager
  Accepts true | false(default)

GridPaging

The GridPaging object has the following properties:

• Enabled - enables pagination
  Accepts true | false(default)
• Spinner - describes the spinner pagination settings
  Accepts GridPagingSpinner() object
• PageSize - sets the number of rows per page
  Accepts integer - default: 10
• PageIndex - sets the start page
  Accepts integer - default: 0