Tutorial: Editable Grid (View) with Modal

In this tutorial, an Editable Grid Form (View) in Modal will be created, using the sample table “customers” and the following extra resources:

  • Field Editing.
  • Modal edition.

Creating an Editable Grid Form (View) in Modal

The editable grid view type is one of the main forms of Scriptcase where the information is shown as locked but the user can still edit in modal windows by using the ‘edit’ icon and then update all the changes on that record by clicking on the ‘update’ icon, or even delete the whole record by clicking on the ‘trash’ icon

1. Create a new application of type Form, select the option Editable Grid (View), and then select the sample table “customers”.

2. Then, if you want a better display of the form, click on the “Edit Fields” tab and change the name of the fields, as shown in the image.

Editing the fields of the Editable Grid Form (View) in Modal

1. In the application form, go to the “Form formats” option, and from the application, menu select the type “Editable grid view“.

2. Then, select the option “Use modal form for editing” and change to “Yes”, as shown below.

3. Then, in the application menu, select the “Field Positioning” tab.

4. Now, remove all the fields present in the right tab with the exception of: “companyname”, “contactname”, “contacttitle”, “birthdate” and “creditlimit” as shown in the image below.

5. Then, access the “Fields” tab in the application menu and select the “creditlimit” field.

6. Navigate to the “Formatting Values” section and activate the “Use of currency symbol” option.

7. Finally, select the  “Run Application” button on the toolbar to generate the Form.

After following the steps above, the Form will look like this:

To see more examples created using Scriptcase, access our examples page where you will find complete project templates and applications. 

Tutorials in the same category

Tutorial: Multi Step Form

In this sample we’ll see how to create a multi step form. The form will be more nice, intuitive an...

Responsive login form 3

To learn how to use the templates available within the ScriptCase in the security module, follo...

Responsive login form 2

To learn how to use the templates available within the ScriptCase in the security module, follo...

Responsive login form

To learn how to use the templates available within the ScriptCase in the security module, follo...

Comment this post