Main page

Record Maintenance with Navigation

Description

This example shows how to use the editable grid component to maintain individual records while at the same time letting users navigate between the records without having to go back to a grid page to select another record.

Usage

Click on First, Prev, Next and Last , or on a record number to view an individual record. You can update the record information then click the “Submit” button to save the changes.

To add a new record, click “Add New”, enter the data for the new record then click “Submit”. A new record will be added.

Steps to recreate

  1. Use the Editable Grid Builder to create the editable grid based on employees table and its seven columns: emp_name, emp_login, emp_password, title, group_id, department_id and phone_work.
    On Step 4 of the Editable Grid Builder select "No Sorting". Then select the Columnar in the Grid layout listbox.
    On Step 5 check the following options: Allow Insert, Allow Update, Allow Delete and Allow Cancel.
  2. Set the Required property of emp_name, emp_login, emp_password and group_id Text Boxes to Yes.
  3. Convert the group_id TextBox to a ListBox. For the ListBox set the Connection property to IntranetDB and select groups in the Data Source property. Select group_id in the Bound Column property, group_name in the Text Column Property and Integer in the Data Type property.
  4. Convert the departmnet_id TextBox to a ListBox. For the ListBox set the Connection property to IntranetDB and select departmnets in the Data Source property. Select department_id in the Bound Column property, department_name in the Text Column Property and Integer in the Data Type property.
  5. Enter 1 in the Empty Rows property to show one empty row used to enter a new record at the bottom of the grid. Also enter 1 in the Records Per Page property so that only one record is displayed on a page.
  6. Add a hidden field next to the {emp_name} Text Box field. Select Code Expression in the Source type property. Enter "1" in the Default Value property. This field is used for value validation while adding a new record if no fields were changed.
  7. Add the "Add New" link near the Navigator. Set the Href Source property to the current page. Also within the Href source property, add an output parameter with the Source Type property set to Expression, the Parameter Source property set to -1 and the Parameter Name property set to emp_id.
  8. In the Data Source property of the editable grid, add a URL Where parameter: emp_id equals(=) emp_id.
  9. Set emp_id in the Remove Parameters property of the Editable Grid so that the 'emp_id' URL parameter is removed after the form is submitted.
  10. Add the appropriate programming code in the Before Show event (and Before Select event for .NET), as is shown in the example.
  11. Make cosmetic changes as needed, by modifying the text and captions within the HTML.

Database Tables used

Database: Intranet

Tables: employees

Programming Notes

The editable Grid's Before Show event was used to hide the new record rows while viewing and editing the values as well as to hide the navigator when adding a new record.

For .NET

The editable Grid's Before Select event was used to hide the new record rows while viewing and editing the values.

The editable Grid's Before Show event was used to hide the navigator when adding a new record.