|
DataGrid
Controls Suite 4.5 |
 | Overview |
 | Features |
 | Reference Book |
 | Live Demos |
| | Populating with Data |
| | Columns |
| | Rows |
| | Appearance & Layout |
| | Behavior |
| | Bottom Bar |
| | Application scenarios |
| | | Master/Detail Grids |
| | | CheckBoxes |
| | | DropDowns |
| | | Images |
| |  | Update Panel |
|
On this example the DataGrid allows the user to modify data right in the Grid's area.
When the cell of the selected row is clicked, it is transformed into Input Box for editing the value. To switch between cells you can use the Tab Key (or Shift + Tab to go in reverse). To add a line break, use the CTRL + Enter.
To enable the Cell Editing for a Grid you should set the CellEditingEnabled property value to True. The Column's CellEditingEnabled property is used to disable the Cell Editing for specific column (the CustomerID in the demo above). The server-side event CellValueChanged occurs when the cell value is changed. Input Box for editing can be customized by using the .CellInputBox{} CSS class, which is in the Skin's CSS Style (Style.CSS).
Cell value can be validated and auto-corrected on the client side. The ClientSideBeforeCellUpdate property specifies the client-side code (procedure) to be launched before Cell Update. This procedure should return an error message (is displayed as alert) or false if the value is not correct. To save corrected value, set the client-side variable dg.CellValue. This example does not allow empty cell values and capitalizes first letters for ContactName.
Note. All changes are stored in the user's current session.
|