Loading...
OutSystems Data Grid Web Sample
Demo
Advanced Samples
Sample Pages
Sample Export Files
Sample Clear Actions
Sample Groups
Sample Save Configs
Documentation
Grid Components
Features
CSS
Formatting
Events
Translations
Samples
Group Header Row
On header row can be added data and merge when rows have the same value creating groups.
To achieve that is needed some custom code, that can be checked on this sample.
1
Group
Text
Country
Text
Downloads
Number
Expenses
Currency
Loading ...
/
to
of
mergeOnNewRow
Image Column
Using the advanced grid column component is possible to have other types like images being loaded on cells.
1
Country
Text
Downloads
Number
Expenses
Number
Image
Advanced
Loading ...
/
to
of
Button Column
Is possible to have different types of data being shown, using the advanced grid column component is loaded a button on a cell.
1
Country
Text
Downloads
Number
Expenses
Currency
Button
Advanced
Loading ...
/
to
of
Mirror Grids
Grid has many events that allow to implement a mirror grid to have two identical grids presenting the same data (as showned in this sample) or having different data but navigating in both at the same time, to compare data for example.
1
Country
Text
Downloads
Number
Expenses
Number
Loading ...
1
Country
Text
Downloads
Number
Expenses
Number
Loading ...
/
to
of
Custom context menu
Context menu options can be overwritten by custom ones and if needed can be used some of the default options as well.
1
Country
Text
Downloads
Number
Expenses
Currency
Loading ...
/
to
of
Item 1
Item 2
Custom Copy
Ctrl+C
Copy Selected Rows
Item 5
Item 6
Text
Insert {$checked} Checked Rows
Dynamic row styles
It's possible to add a class to a specific row. This sample shows how that can be easily done.
1
Country
Text
Downloads
Number
Expenses
Currency
Loading ...
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Red
Green
Orange
Text_red
Add
Striped style rows
Color rows using the cell renderer, by specifying a function that will apply a style on the row by its index.
1
Country
Text
Downloads
Number
Expenses
Currency
Loading ...
Cell style
Cells can be styled by changing its CSS to have any style. This sample show an example of customizations.
1
Country
Text
Downloads
Number
Expenses
Currency
Group
Text
Loading ...
/
to
of
Cell Overflow
Sample having cell overflow when sibling cell is empty.
1
Country
Text
Group
Text
Downloads
Number
Loading ...
Column stretch
Grid stretch to cover the full width: Use "width: '*'" in the advanced format of the columns
1
Country
Text
Downloads
Number
Expenses
Currency
Loading ...
Click here to see your activities