Data Grid
Simple Grid
 
1
P.O. No.
Text
Part No.
Text
Rate
Number
Quantity
Number
Quantity Plus
Number
Due Date
Date
New Date
Date
Supplier
Supplier Code
Select
Supplier Name
Text
Download
Download
Upload
Upload
Link
Link
Vehicle Type
Select
Vehicle Name
Select
Amount
Currency
Checkbox
Boolean
DateTime
DateTime
Loading ...
SaveConfigs
SaveConfigs are used to facilitate the saving or reseting information faster.
 
 
1
P.O. No.
Text
Part No.
Text
Numbers
Quantity
Number
Quantity Plus
Number
Due Date
Date
Supplier
Supplier Code
Select
Supplier Name
Text
Download
Download
Upload
Upload
Link
Link
Amount
Currency
Loading ...
 / 
 to 
 of 
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 ...
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