• Creating a Grid Component - Tutorial
• Filtering

Creating a Grid Component - Tutorial

Description

Covers a range of topics including selecting a database, creating a grid component, selecting data to use and display in the component, and how to view the component in a browser.

Select the Database

1. Start Alpha Anywhere.

2. Open a database. (This tutorial will use the AlphaSports database located in the Samples\AlphaSports\ directory under your program folder.)

3. Click the 'red dot' icon for the Application Server on the toolbar to start the Application Server.

4. Click Web Projects on the toolbar to display the Web Projects Control Panel.

Create the Component

1. Select "AlphaSports" in the Project drop down list at the left side of the screen. If "AlphaSports" does not appear in the list:

   • 1. Click New Project.

   • 2. Enter "AlphaSports".

   • 3. Click OK.

2. Click New > Alpha Anywhere Web Component > OK.

3. Select Grid and click OK to display the Grid Builder.

Define the Component Type

1. On the resulting Component Type page leave the default "Tabular" setting in the Grid layout field unchanged.

2. Select the Updateable radio button.

3. Leave the Grid contains a 'Search' part and Grid contains a 'Detail View' part check boxes unselected.

Select the Data to Use from an Alpha Table

1. Display the Grid > Data Source  page.

2. Select the Alpha Anywhere .dbf Tables radio button.

3. Display the Grid > Query (DBF)  page.

4. Select the Table radio button.

5. In the Table name list click the 'down' icon to navigate to and select the "customer" table.

6. Click Define Primary Key(s).

7. Select Expression.

8. Enter "customer_id" and click OK.

Select the Data to Use from an Access Table

1. Display the Grid > Query (ADO)  page.

2. Select "Access Database" from the Connection Type list.

3. Click the 'dropdown' icon next to the Table/View name field and select the "Customer (Table)" entry.

4. Click the 'up' icon next to the MDB Filename field to navigate to and select the AlphaSports.MDB database. It is located in the MDBFiles folder.

   

5. Click Connect.

6. Select the Table or View radio button.

7. Click the 'dropdown' icon next to the Table/View name field to select "Customer (Table)".

Select the Data to Use from a SQL Database

1. Display the Grid > Query (AlphaDAO)  page.

2. Optionally:

   • 1. Select "Specify Connection String" from the Connection Type list.

   • 2. Click Build to display the Create SQL Connection String dialog.

   • 3. Click the 'up' icon next to the File Name field to navigate to and select the AlphaSports.MDB database. It is located in the MDBFiles folder.

   • 4. Click Test Connection and OK.

3. Click Connect.

4. Select the Table or View radio button.

5. Click the 'dropdown' icon next to the Table/View name field to select "Customer (Table)".

Select the Fields to Display

1. Display the Grid > Fields  page.

2. In the Available Fields list click on "Firstname".

3. Hold the SHIFT key down and click on "Fax".

4. Click the '>' arrow icon to add these fields to the grid. The fields that appear on the grid are listed in the Selected Fields list.

Preview the Grid on the Live Preview Tab

1. The fastest way to preview the appearance of a grid is to open the Live Preview tab. The tab is located at the bottom of the Grid Builder dialog. This preview mode does not require that you first create an A5W page. The mode interprets the HTML on the page but does not run any Xbasic code.

Place the Grid on a Page

1. Click Save on the system toolbar.

2. Enter "AlphaSports_Customer_Grid".

3. Click Save.

4. Click Close.

5. Click New.

6. Select Alpha Anywhere Web Page (A5W) and click OK to display the HTML Editor.

7. Click the 'save' icon to display the Save Page dialog.

8. Enter "AlphaSports_Customer_Grid" and click Save.

9. Click Insert Component to display the Insert Component dialog.

10. Click Select, select the "AlphaSports_Customer_Grid" component, and click OK.

11. Click the 'save' icon and close the HTML Editor.

Preview the Page and Grid in Your Browser

Previewing the grid in your browser causes the Application Server to process any Xbasic code that may be on the page.

1. Click A5W Pages in the left pane to see display the list of pages.

2. The next step is to publish the page to your local webroot. The local webroot is where you will test your website. In most cases you will create a second profile where you will publish your finished public website. Right click the "AlphaSports_Customer_Grid" and select Publish (Local Webroot) and open.

3. Switch to your browser. The resulting grid should look like the following.