Posted 27 Sep 2007
Link to this post
This code-library project is obsolete. For an updated version click here.
|RadGrid for ASP .NET version
RadControls for ASP .NET AJAX version
5.0.0 and later
2011.1.519 and later
3.5 and later
|Visual Studio version
2008 and later
all supported by RadGrid for ASP .NET
all browsers supported by RadControls for ASP .NET AJAX
The sample project demonstrates an Excel-like RadGrid. This resembels entering data in an excel spreadsheet - once you click on a cell, you can enter data in it, without having to invoke the edit command in the standard way. If you scroll down, new items will be added to the control, which will also be in edit mode (inline edit mode).
The control includes an Update link in the CommandItem, which will call the ItemCommand event handler, where you can include custom code, to update the database, with the values entered so far.
UPDATED VERSION AVAILABLE BELLOW
The following example extends the Excel-like RadGrid sample. It adds the "Tab" key navigation, "Enter" key navigation, single cell click mode, double cell click mode and scroll bar which is always scrolled to the row with selected cell.
Possible actions which users can perform:
Single mouse click on a cell:
Marks the cell as selected(single click selection mode). If the user starts writing the text, the content of the cell is replaced with the text entered from the user and the cell is set to the edit mode.
Double mouse click on a cell:
Marks the cell as selected in edit mode(double click selection mode). In this mode the user can edit the text into the cell.
Left Arrow key is pressed:
- If the cell is in single click selection mode: Selects the left cell.
Right Arrow key is pressed:
- If the cell is in double click selection mode: Moves the caret one position left.
- If the cell is in single click selection mode: Selects the right cell.
Up Arrow key is pressed:
- If the cell is in double click selection mode: Moves the caret one position right.
Down Arrow key is pressed:
- If the cell is in single click selection mode: Selects the top cell.
"Tab" key is pressed:
"Enter" key is pressed:
- If the cell is in single click selection mode: Selects the bottom cell.
"Shift" + "Enter" keys are pressed:
Adding rows and saving data
Adding new row to the RadGrid:
- If the cell is in double click selection mode, selects the bottom cell.
Saving the RadGrid data into the database:
- Add new row by pressing the "Add New Row" link from the RadGrid Command item.
- When the most right and most bottom cell is selected and user press Left arrow or "Tab" key or "Enter" key.
- When the RadGrid last row's cell is selected and user press Down arrow or "Enter" key.
- Save data by pressing the "Save in Database" link from the Grid Command Item. The new inserted rows and the updated rows from the RadGrid are saved in the database.