When loading a Grid Widget, all the rows of data are loaded.

The Grid can also be configured with Paging : it only loads pages of 50 rows (configurable), and a page navigator allows to see the rest of the data.

Check Allow Paging under Basic Settings and set a Page Size (default 50) :

Grid Allow Paging configure

Grid Allow Paging runtime

The User can still scroll down each page (depending on the widget height), but not more than 50 rows at a time.

Then the navigator can be used to go to :

Grid Allow Paging navigator

  • first page
  • previous page
  • (1 2 3) a specific page number
  • > next page
  • >> last page

Column width

Grid column width is by default constant, but can be configured to adapt to the content width.

Grid Fit Content before

Check Fit To Content under Basic Settings :

Grid Fit Content configure

Grid Fit Content after

Manual resize

At runtime, the user can resize the columns.
Hover your mouse between the column headers to show a “resize” pointer :

Grid resize manual example

Then you can :

  • drag to resize manually
  • double-click to automatically resize the left column to the largest element

Grid Lines

Grid lines (columns/rows separators) can be displayed or hidden.

Check the corresponding Horizontal_/_Vertical option :

Grid Line Vertical configuration

Grid Line Vertical runtime

Grid Line Horizontal configuration

Grid Line Horizontal runtime

Column Headers style

The visual style of widgets is inherited from the currently applied Theme.
You can override the column headers style by selecting a color for their background and font :

Grid header style configuration

Grid header style runtime

Alternate Row Coloring

For better readability, you can configure a secondary row color to display only on the odd-numbered rows.
Check Alternate Row Coloring and select a color :

Grid alternate row color configure

Grid alternate row color example1
Last modified: Sep 13, 2021


Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.

Post your comment on this topic.

Post Comment