Main page

Editable Grid with new rows added automatically

Description

This example shows how to create an Editable Grid in which new empty rows are automatically added as you progressively enter information now new records. Usually, an editable grid has a set number of empty rows for adding new records. This example shows how the empty rows can be dynamically displayed as the user fills in information. JavaScript code is used to detect whenever new information is added to a field so that a new row can be displayed automatically.

Usage

  1. Enter information for a new record in the bottom empty row of the editable grid.
  2. After entering a department name, click on the Tab key to move to the next field. At this point, a new empty row is added.
  3. Select the department manager for the record you are currently adding then you can proceed to add another record in the empty row that was dynamically added.
  4. After adding all the records you wish to add, click on the 'Submit' button to save the information.

Steps to recreate

  1. Use the Editable Grid Builder to create the editable grid based on the "departments" table and its two columns: department_name and department_manager_id.
  2. Set the Empty Rows property of the editable grid to 30. This number defines the maximum number of empty rows which could possibly appear for adding new records.
  3. Convert the manager_id TextBox to a ListBox. For the ListBox set the Connection property to IntranetDB  and select employees in the Data Source property. Select emp_id in the Bound Column property, emp_name in the Text Column Property and Integer in the Data Type property.
  4. Switch to HTML mode and locate the table row <TR> where the TextBox and ListBox appear. Within the <TR> tag, add the attributes id="", name="" and AddedRow="".
  5. Place the cursor within the value of the id attribute and add a Label control called RowIDAttribute. Do the same for the name attribute by adding a Label control called RowNameAttribute, then add third Label control into the AddedRow attribute and this time call it AddedRow. After the three attributes add a RowStyleAttribute Label at the end of the <TR> tag.
  6. Locate the <input> tag for the department_name TextBox field and add the attributes onchange="ShowNewEmptyRow(this);" and id="{AddedRow}".
  7. Set the Content property of the RowStyleAttribute Label to HTML.
  8. While in HTML mode, add the code for the ShowNewEmptyRow() JavaScript function as shown in the example.
  9. Add the appropriate programming code into the Before Show Row and Before Execute Delete events of the editable Grid as shown in the example.
    Note: In .NET the Before Show and Before Submit event are used additionally.
  10. Make cosmetic changes as needed, by modifying the text and captions within the HTML.

Database Tables used

Database: Intranet

Tables: departments, employees

Programming Notes

The editable grid's Before Show Row event is used to fill the id, name and style attributes of the <TR> tag depending on whether the row is empty or filled.

For .NET
The editable grid's Before Show event is used to create the element array.
The editable grid's Before Show Row event is used to fill the style attributes of the <TR> tag.
The editable grid's Before Submit event is used for the error handling when redisplaying the page, as the second raising of BeforeShowRow event is not supported.

The editable grid's Before Execute Delete event is used to update the related employees table to set the value of the 'department_id' field to NULL if a department is deleted.