Adding and editing a Data-Grid-Separate-Form view

Data-Grid-Separate-Form view is a read-only grid that offers a design-time choice of three edit modes using a form a read-only, directly editable, or read-only-to-edit form that overlays the grid in a separate screen on the app views page.

At run time, the grid initially displays by itself with no records selected. You can then navigate the rows of the grid without selecting a record. At any point during row navigation, you have the choice of selecting a row in the grid, or if the associated form is directly editable or read-only-to-edit, selecting an option to add a new record to the bound data source.

For a read-only or read-only-to-edit form, selecting a grid row automatically overlays the grid with a read-only form showing fields from the record displayed as read-only, plain text. These fields can be organized into field groups that appear in labeled tabs within the form. For a read-only-to-edit form, you also have the option to edit the record displayed in the read-only form or go back to the grid without making changes.

For a directly editable form, selecting a grid row overlays the grid with a form that displays the record fields for editing according to the editor types selected for the fields in the data source. These fields can be organized into field groups that appear in labeled tabs within the form. For a read-only-to-edit form, an identical editable form also overlays the initial read-only form when you select the option to edit the displayed record. This editable form provides options to save or cancel the changes you make, or to delete the record from the data source that is selected in the grid and displayed in the form.

If you select the grid option to add a new record, the view overlays the grid with a similarly editable form that displays the fields for a new record with initial values that you can change before adding the record to the data source.

For any editable form, you can either save the changes or cancel the changes. For a read-only-to-edit form that is editing an existing record, the screen returns to the read-only form displaying the same record fields, with an option to go back to the grid. For a directly editable form, the screen goes directly back to the grid. For either edit mode, when the screen goes back to the grid, it either displays with the row highlighted (but not selected) for the most recently edited or added record, or displays with the first row highlighted in the current grid page after canceling a new record add.

At design time, you can separately customize what columns are displayed in the grid and what fields are displayed on the form, as well as other properties that affect the display of the grid, the form, and its data.

When you select a Data-Grid-Separate-Form view in a module at run time, the app displays a page similar to the view labeled Edit Customer Separately in this read-only-to-edit mode example:

The view opens with a read-only grid similar to the previous Edit Customer Data-Grid-Form view example (see Adding and editing a Data-Grid-Form view).

Selecting any row, on any page of the grid immediately overlays the grid with a read-only form containing fields displayed from the bound data source record shown in that row, as in this example, shown with three field groups accessible using a tab folder:

Clicking Back (above the form) returns to the read-only grid with the same row highlighted; clicking Edit (above or below the form) overlays the read-only form with an editable form, as in the following example:

Each field in the editable form is displayed according to the editor type that has been selected for it in the bound data source. In this example, the displayed value of the form field labeled Sales Rep Name can be changed by selecting a new value from a list (combo-box editor type) that is populated from a foreign key look up. The Kendo UI Builder provides built-in support for foreign key look ups in the forms of Data-Grid* views with forms. For more information on foreign key support, as well as selecting editor types for fields, see Adding and editing a data source.

This is the editable form after saving changes to the Email and Sales Rep Name fields:

From here, the edited record can be saved (by clicking Save), deleted (by clicking Delete), or the edit canceled (by clicking Cancel), all of which return to the read-only form displaying fields from an appropriate record, with the grid enabled.

To add a Data-Grid-Separate-Form view to a user-created module, edit the module, which opens a view design page in the module (see Figure 30 for an example), then click Add View at the top of the VIEWS pane.

This opens an Add View dialog box, similar to this example:

In this example, the dialog box has edit_customer_separately entered as the value of the view Name, Edit Customer Separately entered as the value of the view Label, and Data Grid Separate Form selected as the view type. The options for entering these values are the same for all user-created views.

The Rolestab opens an Authorization Roles dialog box that allows you to select the user roles that the app can use to authorize access to this view. To know more about roles, see Using roles to authorize user access.

For more information, see the Add View dialog description in Adding and editing a Data-Grid view.

After specifying the Name, Label, and View Type, click Add View to create the specified view and display its view design page for editing, as shown for the edit_customer_separately Data-Grid-Separate-Form view in this example:

The Data-Grid-Separate-Form view design page shows certain features common to all predefined Data-Grid* view design pages, top-to-bottom and left-to-right: