Tutorial - Inline-Add, Inline-Copy, Inline-Edit, Grid-Add, Grid-Edit and Multi-Edit

In this tutorial we will show you how to setup different add/edit operations for the List Page, namely:

Inline-Add - Add a new record
Inline-Copy - Copy from an existing record and add
Inline-Edit - Edit an existing record
Grid-Add - Add multiple new records at once
Grid-Edit - Edit records in the current page at once
Multi-Edit - Edit selected records at once

We will use the Suppliers table in the demo database for demonstration.

Fields in Table "Suppliers"

1. Open PHPMaker

Open PHPMaker and connect to the demo database.

2. Set up table settings

Select the "Suppliers" table, click the Table tab, enable Inline-Add, Inline-Copy, Inline-Edit, Grid-Add, Grid-Edit and Multi-Edit.

Important Make sure you table has primary key, or records cannot be located and edited.

Click the table "Suppliers" on the database pane. The Field Setup page for the table Suppliers is displayed.

The fields to be displayed in the List page is shown in the List column under the List Page Section. These fields are editable in the Inline/Grid-Add/Copy/Edit and Multi-Edit mode.

3. Generate scripts

Go to the Generate tab, click the Generate button to generate scripts.

4. Run the application

Run the scripts in your browser, click on the link to the "Suppliers" table, there will be new links for "Inline Add" (Inline-Add), "Inline Edit" (Inline-Edit), "Inline Copy" (Inline-Copy), "Grid Add" (Grid-Add), "Grid Edit" (Grid-Edit) and "Edit selected records" (Multi-Edit).

4.1 Inline-Edit

Click on the "Inline Edit" link to enter Inline Edit mode. The selected record will be highlighted and entered into Inline-Edit mode. Click on the "Update" link to update the record or click "Cancel" to cancel update.

4.2 Inline-Copy

Click on the "Inline Copy" link for a record to enter Inline-Copy mode.

Click on the "Insert" link to insert the new record or click "Cancel" to cancel.

4.3 Inline-Add

Click on the "Inline Add" link to enter Inline-Add mode.

Click on the "Insert" link to insert the new record or click "Cancel" to cancel.

4.4 Grid-Add

Click on the "Grid Add" link to enter Grid-Add mode.

Click on the "Insert" link to insert the new record or click "Cancel" to cancel.

Note: You can click "Add Blank Row" (+ icon) to add or "Delete" (trash icon) to add or delete rows without refreshing the page. This feature is implemented by JavaScript.

4.5 Grid-Edit

Click on the "Grid Edit" link to enter Grid-Edit mode.

Click on the "Save" link to update the records or click "Cancel" to cancel. You can also click on pager links to go to other pages.

Note: You can click "Add Blank Row" (+ icon) to add or "Delete" (trash icon) to add or delete rows without refreshing the page. This feature is implemented by JavaScript.

4.6 Multi-Edit

To edit specific records (e.g. records with Supplier ID = 1 and 3), click the checkboxes for the records and click on the "Edit selected records" link to enter Multi-Edit mode.

The selected records will be displayed for edit. Click on the "Save" link to update the records or click "Cancel" to cancel.