If your Visual Basic project is still running, stop it. Add the following line of code to the Click event of the

DBGrid: Exercise 7, Part I - Exporting HTML

1. If your Visual Basic project is still running, stop it. Add the following line of code to the Click event of the

"Export" button in your application, following the existing line of code:

SSDBGrid1.Export ssExportTypeHTMLRowFiles, ssExportCurrentRow _ OR ssexportoverwriteexisting, "ITEM.HTM", "1-ROWTPL.HTM", "ItemID"

(There should be two lines of code in the Click event when you are done. The first line, which you entered in Part I, will still generate the completely formatted table when the button is clicked.)

This new line of code will generate an HTML file based on one row - the row containing the currently active cell (ssExportCurrentRow). It will use the file 1-ROWTPL.HTM as the template to generate the HTML. The name of the HTML file that is generated will be based on two pieces of information. The first is the file name specified for the ExportToFile parameter (ITEM.HTM in this case.) The control will take the first four letters of this filename as the beginning of the generated file's name. It will then concatenate the value of the field you specified in the OutputFileField parameter to complete the filename (in this case, the value of the

"ItemID" field in the database.) Any existing file with the same name will be overwritten (ssExportOverwriteExisting).

2. Now you must create the 1-ROWTPL.HTM template file. Open your HTML editor and specify the following:

<HTML>

<BODY>

{SSREPLACE TABLE DATA}

</BODY>

</HTML>

3. Save this file as 1-ROWTPL.HTM, then run your application and click the "Export" button. Depending on which cell was currently selected when you clicked "Export", a new file will be created with a name like ITEM1.HTM. The file should look something like this:

4. Stop your Visual Basic project and change the line you added to read:

SSDBGrid1.Export ssExportTypeHTMLRowFiles, ssExportSelectedRows _ OR ssExportOverwriteExisting, "ITEM.HTM", "1-ROWTPL.HTM", "ItemID"

Then run the project again. Select the first three rows in the grid, then click the "Export" button. Because you specified that the Export method should export selected rows, and you have selected three rows in the grid, you will see three files created: ITEM1.HTM, ITEM2.HTM and ITEM3.HTM. Each file will contain a table similar to the one above, but with the data for an individual row.

5. Although it is easy to generate simple tables based on row data, there is much more you can do using the row export feature. Open the 1-ROWTPL.HTM file in your HTML editor. Delete the existing HTML code and insert the following:

<HTML>

<BODY>

ITEM NUMBER {SSREPLACE DATA FIELD="ItemID"}

{SSREPLACE DATA FIELD="Description"}

<HR>

Price: {SSREPLACE DATA FIELD="Price"}

Quantity in Stock: {SSREPLACE DATA FIELD="StockQty"}

Preferred Customer Discount: {SSREPLACE DATA FIELD="Discount"}

<HR>

To order call: 1-800-555-SMALL

</BODY>

</HTML>

This HTML presents the information from the grid in a more textual manner. It pulls data from the grid and mixes it with text and formatting tags to generate a custom HTML page describing the item. By using multiple {SSREPLACE} tokens with the FIELD attribute, you can place data from the grid anywhere on the page.

Save 1-ROWTPL.HTM, select the first three rows in the grid and click the "Export" button. Three new files will be created. Open the ITEM1.HTM file in your web browser. It will look something like this:

When you are ready, stop your Visual Basic project and close your web browser.

6. Now that you know how to export rows one at a time, you may find that you need to examine the data being exported and take some action based on its value. Earlier, you used the RowLoaded event to examine the value of a column and format the grid data based on the results. You can do the same thing to exported grid data using the RowExport event. This event gives you the chance to examine grid output and make changes while the data is being exported. It also gives you the opportunity to cancel the export once it is in progress.

(Note that RowLoaded is also fired as each row is exported, so any formatting you do in that event is included in the export.)

First, modify the second line of the "Export" button's Click event so that it contains the following code:

SSDBGrid1.Export ssExportTypeHTMLRowFiles, ssExportAllRows _

OR ssExportOverwriteExisting, "ITEM.HTM", "1-ROWTPL.HTM", "ItemID"

7. Open 1-ROWTPL.HTM in your HTML editor and make the following change. Add an extra {SSREPLACE}

tag as shown. Replace the following:

Quantity in Stock: {SSREPLACE DATA FIELD="StockQty"}

Preferred Customer Discount: {SSREPLACE DATA FIELD="Discount"}

With the following:

Quantity in Stock: {SSREPLACE DATA FIELD="StockQty"}

{SSREPLACE TAGVAR}

Preferred Customer Discount: {SSREPLACE DATA FIELD="Discount"}

The TAGVAR attribute causes the token to be replaced with the TagVariant property of the Grid control in the generated file. In the next step, you will take advantage of this feature to expand your customization of the generated HTML.

8. Select the RowExport event of the Data Grid and enter the following code. (Because the following HTML requires embedded quotation marks, the ASCII value of the quotation mark character - Chr$(34) - is used to construct the string.)

If SSDBGrid1.Columns(1).CellValue(Bookmark) = 0 Then

SSDBGrid1.TagVariant = "<FONT COLOR=" & Chr$(34) & _

"#FF0000" & Chr$(34) & ">This item is out of stock. " & _

"Please try again tomorrow. "

Else

SSDBGrid1.TagVariant = ""

End If

This code is similar to what you entered in the RowLoaded event. Depending on the quantity of an item, it assigns a value to the TagVariant property of the grid. Since the Data Grid will replace the {SSREPLACE TAGVAR} token with the value of the TagVariant property, this provides a handy way to insert a custom HTML snippet into the generated file "on the fly. "

9. Save the HTML file, run your project and click the "Export" button. This time, because you have specified the ssExportAllRows value for the Flags parameter, a new HTML file will be generated for each row in the grid, regardless of whether or not it is selected. If you open the ITEM4.HTM file in your web browser, you will see the following:

The control has replaced the {SSREPLACE TAGVAR} token with the contents of the TagVariant property, which inserts the relevant HTML into the generated file. If you open any of the other files, they will not contain the text in red, because they were generated from data that did not meet the condition specified in RowExport.

You have now seen how the row export feature can be used to generate individual HTML files for rows in the grid. You have also seen the further use of {SSREPLACE} tokens to "fill in the blanks" with grid data without using a generated table. In the next exercise, you will combine these techniques to create a master/detail form .

DBGrid: Ex. 7, Part IV - Exporting HTML

You have now seen how to use the Export method, RowExport event and HTML templates to create several types of customized HTML pages using the data and formatting from your Data Grid control. In this final exercise, you will see an additional feature of Data Widgets 3.1's exporting capabilities - the ability to create and embed hyperlinks in an exported document.

This exercise will build on the previous ones. The main table will be enhanced to provide hyperlinks to the detail page for each product. In addition, each product page will have a table detailing the items that are in stock. The information for this table will be drawn from the second grid and appended to the existing item pages.

1. If you do not have your project from the previous exercises available, open it now. Add a new form ("Form2") and add a Data Grid and a data control to the second form. Name the grid "SSDBGrid2" and the data control "Data2.

2. Specify the SMALL.MDB file as the DatabaseName property of the data control. Set the RecordSource property to "Items." Set the DataSource property of the data grid to "Data2."

3. Right-click on the grid and choose "Properties..." from the context menu. The property pages for the grid will appear. Click the "Load..." button and enter the location of the file ITEMS.GRD. (You may want to click the

"..." button and browse for the file. It is located in the SAMPLES/CHAP05/HTML subdirectory of the directory where you installed Data Widgets.) This is a saved layout file for the fields in the Items database.

In document Manual Sheridan DataWidgets (Page 50-54)