Basic VSPX programming tutorial
Data-bound VSPX controls Linking a DB data into a VSPX controls

## Select list initialized from SQL select statement

The power of VSPX controls is easy way to bind to a Database objects as tables. In the selectdb.vspx file is shown an easy way to initialize a simple select list from database data. This example shows Products from Nortwind database rendered as select list. The focus on this control is vspx:data-list control. It's initialized with select statement, so the key and value attributes are used to designate what to be used for the drop-down box.

## Updating a Database table row via VSPX update form

Beside showing a data in a form, the database data need to be changed via forms. The most easy way to do that is to use vspx:form with modifier attribute "type" with value of 'update'. The vspx:form[type='update'] used as container of few more elements:

- vspx:key - binder to a specific row, can be one or more. Usually it's a primary key. Note that this is a not a control, it's a marker in the update form.
- vspx:template[type='if-exists'] - this is a wrapper class for content to be shown under specific condition. In that case as if-not-exists template is not specified, content of this will be shown in both situations. In other words this example will show content of that template always. The difference will be in value of the fields inside it.
- vspx:text - it's used to show the data on the row, and accept the data to be updated. These fields have attribute "column" which designate column to be used for data rendition and update. Actually they are inside a template, but logically they are linked to the update form.
- vspx:button - this is a submit button used to submit the form.

The example will:

- insert a record in Demo.demo.Customers table if CustomerID doesn'y exists
- will update the CompanyName column if CustomerID is set.

## Updating a enumerated values in a Database table

To run this example we will first need to setup the initial state (using the link beside SQL script, see bellow). This action will cerate a simple table for the next experiment with update form. In some cases we need to enumerate values to the given column in Database table. In this example we will use a vspx:radio-button bound to the column to represent the data value and to allow it's modification to the some degree. (The degree is possible values allowed by group of radio-buttons).

In practice we are repeating the previous example but instead using of vspx:text to enter the data , we will use a vspx:radio-button for the second column. The pane at the bottom of demo page shows the result of update, clicking a link of a 'e-id' will load appropriate record to the update form. The button is used to update the data row as in previous example.

## Simple scroll-able edit-able data grid (vspx:data-set)

The most complex control used to view and modify the data in a Database tables is vspx:data-set. This control represents a result set from a SQL select statement as a table (or some other form depending of templates used) and allows scrolling, editing, inserting or deleting a row. In practice it's a combination of scroll-able grid plus one or two update forms. In the example data_set.vspx is shown navigation over Northwind's Customers table. So the following should be noticed in the demo source:

- The vspx:data-set contains a two simple templates for the header and footer.
- The middle template is special denoted by "repeat" value of "type" attribute, it's used to render the row in a grid, form to insert, update form in place of a row in a focus and for case of empty result.
- The repeat template contains four templates for each case as discussed above
- The template[if-not-exists] will be rendered when no data found
- The template[edit] will be displayed when edit button is selected
- The template[add] will be always displayed, if specified
- The template[browse] is a one per row to show the content on each row
- The buttons for scrolling as [ds]_next and [ds]_prev must be defined with these suffixes.
- The above applies to [ds]_edit, [ds]_delete and [ds]_select. In other words some buttons in data-set must have special names.