Getting to know the Web Controls
Lesson 24 - cWebHtmlList
In this lesson we’ll look at the WebHtmlList control in DataFlex. The WebHtmlList is a control that combines the data binding of the WebList class with the flexibility and freedom of the WebHtmlBox class. It works by defining a template for a table structure. In this template markers are placed that specify the column values. When the list is filling itself with data it will generate the rows based on the specified template. The WebHtmlList can be data aware or filled manually, just like the WebList class. It is possible to handle clicks on specific row by implementing the OnRowClick event. It is also possible to handle clicks on HTML elements by implementing the OnElementClick event. Using this control requires knowledge of both HTML and CSS, but it can provide great flexibility. Now that you know more about the WebHtmlList, I will show a demo on how to implement it and how it looks.
DEMONSTRATION
- For this lesson im adding a WebHtmlList to the ZoomOrder view.
- First, lets change the WebList to a WebHtmlList.
- In order to create our list we are going to need to set 3 different values.
- First we set the psHtmlBefore, lets set that to “<table>
- Now, lets set the psHtmlAfter to “</table>
- Lastly we need to define a template, this can be done by combining html row and column elements.
- Lets first add a row to our template by adding the tr element to our template.
- This is the html way to create a row in a table. After creating a row we are going to need to insert cells into the rows.
- This can be used with the td html element.
- Adding the <td> element to our code it will look like this. <tr><td></td></tr>.
- But we are still missing the actual content inside of the cells. So lets add that now.
- To do this, we type {{ }} inside of the td element, inside these brackets we will type the name of a WebColumn objects.
- So for example lets add oInventoryItem_ID in-between the brackets.
- If we compile and run the program now, we will see that we now have a table, where each row has a single cell populated with the inventory item id.
- If we want to add more items to a row, we can do so by adding more td elements like so.
- Now that we have added more cells, lets compile and run again.
- As you can see, we now have more cells inside of our rows, however the cells are tightly packed together.
- We can change this by adding inline css. For example, within our first cell element, we can add an inline style attribute.
- Lets give that style attribute a width that is bigger than the other columns.
- Ofcourse, we are still missing information for the user about which column is what.
- If we want to add descriptions for each column at the top we will need to change our psHtmlBefore.
- Keep in mind that you do NOT want to add this in the psHtmlTemplate, this is because the elements inside of psHtmlTemplate will be repeated for every single element in a list.
- Lets create a row inside of our psHtmlBefore. Inside of this row lets add a few header cells.
- We can do this by using the <th> element in html. The header elements are bold by default.
- Inside these th elements we add the name of the columns.
- If we want to make all our header columns bold, we can do so by specifying font-weight: bold inside of the tr element the headers are wrapped in.
- It is possible to style each html element inside of this list individually, for example if I tell the first cell to be color red, and I tell the next cell to be color blue and recompile, you will see that the first cell is the color red and the next cell is the color blue.
REFERENCE LIBRARY
Getting to know the Web Controls
