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
  • Grid width
  • Grid height
  • Changing the DikeGrid size
  1. Fundamentals
  2. Grid Structure

Grid Size

You can customize the width and the height of the DikeGrid instance.

PreviousGrid StructureNextHeader

Last updated 3 years ago

Grid width

By default, the DikeGrid width is equal to auto. However, you can change this value by providing width's input property.

You can also change this value by providing an Injection Token called GRID_WIDTH.

Grid height

By default, the DikeGrid height is equal to 90vh. However, you can change this value by providing height's input property.

You can also change this value by providing an Injection Token called GRID_HEIGHT.

Changing the DikeGrid size

Let us give the DikeGrid the previous input properties, binding the related properties from the gridProperties object.

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

Now, open the , go to the Size section, type 80% and 90vh for the width and the height, respectively.

Floating Configuration Panel - Size
Changing the DikeGrid size
Floating Configuration Panel