{Header}

Editable Grid with 'Add Row' button

Description

This example shows how to create an Editable Grid in which you can dynamically add empty rows for adding 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 needed by clicking on a 'Add Row' button.

Usage

  1. Click on the 'Add Row' button to add a new empty row.
  2. Enter the department name and select the department manager.
  3. If you need to add another record, click on the 'Add Row' button again to add another empty row.
  4. After adding all the new records you want 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 when you click on the Add Row button.
  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. Add a button to the bottom row of the editable grid and sets its Name property to AddRowBtn. Also set the Enable Validation property to No and leave the Operation property empty. Under the Format tab of the properties window, set the Value property to Add Row and the type property to button.
  5. Switch to HTML mode and locate the table row <TR> where the TextBox and ListBox appear. Within the <TR> tag, add the attributes id="" and name="".
  6. Place the cursor within the value of the id attribute and add a Label control called RowIDAttribute. Do the same for the name attribute and add a Label control called RowNameAttribute. After the two attributes, add a RowStyleAttribute Label at the end of the <TR> tag.
  7. Set the Content property of the RowStyleAttribute Label to HTML.
  8. Add Custom Code to the On Click client side event of the Add Row Button as shown in the example.
  9. Add Custom Code to the Before Show Row and Before Execute Delete server events of the editable grid form and add a RowNumber global variable 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 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.