DkGrid
  • Overview
  • Getting Started
    • Quick Start Tutorial
  • Fundamentals
    • Grid Structure
      • Grid Size
      • Header
      • Row Filter
      • Rows
      • Panels
      • Gutters
      • Edition Toolbar
      • Paginator
      • Borders
      • Column Context Menu
      • Waiting Indicator
    • DataSource
      • In-Memory DataSource
      • Custom DataSource
    • Theming
  • Columns
    • Column Definitions
    • Column Grouping
    • Column Sizing
    • Column Moving
    • Column Pinning
  • Rows
    • Row Sorting
    • Row Selection
    • Row Grouping
    • Row Pagination
  • Filtering
    • Column Filters
    • Filter types
    • In-line Filters
  • Editing
    • Row Edition
    • Edition templates
    • Edition validation
    • Multiple rows edition
  • Reference
    • DkGrid API
      • DkGridColumnDef
      • DkGridSorting
      • DkGridSelection
      • DkGridRowGrouping
      • DkGridPagination
      • DkGridWaitingIndicator
      • DkGridFactoryDataSource
      • DkGridFilter
      • DkGridEdition
    • Components
      • DkGridComponent
      • DkGridColumnComponent
    • Classes
      • DataSource
      • Columns
      • Rows
      • Filtering
      • Editing
    • Interfaces
      • Columns
      • Sorting
      • Row Grouping
      • Filtering
      • Editing
    • Injection Tokens
      • Grid Structure
      • Filtering
      • Editing
      • Theming
    • Type aliases
      • DataSource
      • Columns
      • Selection
      • Filtering
      • Editing
    • Type Guards
Powered by GitBook
On this page
  • Pagination Row
  • Changing the Pagination Row height
  1. Fundamentals
  2. Grid Structure

Paginator

Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the paginator is also called the Pagination Row.

PreviousEdition ToolbarNextBorders

Last updated 3 years ago

Pagination Row

The Pagination Row shows the paginator when you enable pagination in the DikeGrid. Bind the related property from the gridProperties object to allow pagination.

grid-structure.component.html
<dike-grid id="grid-structure"
    [allowPagination]="gridProperties.allowPagination">
</dike-grid>

Open the , go to the Pagination group, and enable pagination.

The previous configuration generates the following output:

The DikeGrid always shows the Pagination Row at the bottom of the content rows.

Changing the Pagination Row height

The Pagination Row is 64 pixels in height. Nevertheless, you can change this height by providing an input property called paginationRowHeight.

Let us bind the corresponding property from the gridProperties object to change the Pagination Row height.

grid-structure.component.html
<dike-grid id="grid-structure"
    [allowPagination]="gridProperties.allowPagination"
    [paginationRowHeight]="gridProperties.paginationHeight">
</dike-grid>

You can also change the Pagination Row height by providing an Injection Token called PAGINATION_ROW_HEIGHT.

Now, open the , go to the Pagination group, and type 100 in the Pagination Row Height textbox.

Floating Configuration Panel - Pagination
Pagination Row
Changing the Pagination Row height
Floating Configuration Panel
Floating Configuration Panel