Operating data in ASP.net 2.0 31: Use DataList to display multiple records in one line _ self-study process

Introduction

In the DataList example of the first two chapters, we use a single column of html<table> to display the data. And customization makes it easy for DataList to display the data on multiple rows of table. You can also display data in a single row of multiple columns.

We can customize DataList by RepeatColumns and RepeatDirection properties. These two properties determine the number of columns and the orientation (horizontal or vertical) of the data when it is displayed. Figure 1 is a DataList example of a 3-column table to display product information.

Figure 1:datalist Display three product information in one line

By displaying multiple records on one line, DataList can use the horizontal space of the screen more efficiently. In this chapter we will explore these two attributes.

First step: Display product information in DataList

Before learning the RepeatColumns and RepeatDirection properties, we first display the product information with a standard Single-column multiline DataList. We use the following markup language to display the name,category and price of product:

In the previous tutorial we have done how to bind data to DataList, so this step is quickly taken. Open the Repeatcolumnanddirection.aspx page under the Datalistrepeaterbasics folder, Drag a DataList in. Creates a ObjectDataSource from the DataList smart tag, using the GetProducts method configuration of the Productsbll class. In Insert, Select None in the Update and delete tabs.

After you create ObjectDataSource and bind to DataList, Visual Studio automatically creates a ItemTemplate that displays the name and value of the Product field. Adjust itemtemplate- By directly modifying the Edit Templates option in the markup language or smart tag-replaces the product name, Category name, and price text with a label control, binding the assigned value to the Text property with the appropriate binding syntax. After doing this, Your page's markup language should look similar to the following:

<asp:datalist id= "DataList1" runat= "Server" datakeyfield= "ProductID" datasourceid= "ObjectDataSource1"
 Enableviewstate= "False" >
 <ItemTemplate>
   
 

Note in the UnitPrice Eval binding syntax I include a format character that converts a value to currency format-Eval ("UnitPrice", "{0:c}"). Browse this page in the browser, as shown in Figure 2, DataList displays product information in a single, multiline table.

Figure 2: By default, DataList displays a single row of multiple rows of table

Step Two: Modify the layout direction of the DataList

By default, DataList displays items (item) vertically with a single row multiline table. This can be modified by the RepeatDirection property. After changing the RepeatDirection property from vertical to horizontal, DataList displays data in multiple columns in a single row. You can modify this property by selecting the RepeatDirection Property window in the designer. The designer immediately adjusts the layout of the DataList and creates a single, multiple-column interface (see Figure 3).

Figure 3:repeatdirection Property is used to determine the layout direction of DataList items

When displaying small amounts of data, a single row of multiple columns of table is an ideal choice. While large amounts of data, a single line requires many columns, The screen will appear with a horizontal scroll bar because there are not many items displayed. Figure 4 shows the display of product information in a single DataList. Because there are too many (81) of the product, users have to scroll to the right to see the information for each product.

Figure 4: A single column of DataList will have a horizontal scroll bar when large amounts of data

Step three: Display the data in a multiple-row table

To create multiple rows and columns of DataList, we need to set the RepeatColumns property to the number of columns displayed. The default RepeatColumns property is 0, so DataList will display all items in a single or single line ( Depends on the value of the RepeatDirection property.

We will show 3 product in each row in the example. So set the RepeatColumns property to 3. After this, browse the page in the browser. As shown in Figure 5, the product display is listed in 3 columns.

Figure 5:3 product per line display

The RepeatDirection property affects the layout of DataList items. Figure 5 shows the repeatdirection as horizontal. Notice the first three Product-chai, Chang, and Aniseed Syrup-is listed first from left to right, and then from top to bottom. The following three product (starting from chef Anton's Cajun seasoning) is in the first row below three. Change RepeatDirection to Vertical, The layout of these product changes to first from top to bottom, then left to right. See Figure 6.

Figure 6:products Vertical Layout

The number of rows in the final table depends on the total number of records divided by the value of RepeatColumns. Because there are 84 product information, divide by 3 to 28 rows. If there's more than enough, The last row or column is populated with an empty cell. If the RepeatDirection is vertical, then the final column will have an empty cell. If repeatedirection is horizontal, then the last line has an empty cell.

Summarize

DataList by default, the items are displayed by using a Single-column table. And the GridView has only one TemplateField. We can display multiple records on a single line. This can be achieved simply by setting the RepeatColumns property to the number of columns per row. , the RepeatDirection property can be used to specify that the contents of a table with more than one row of columns be horizontally laid-first from left to right, then top to bottom-or vertically-first from top to bottom, then from left to right.

Author Introduction

Scott Mitchell, with six asp/asp. NET book, is the founder of 4GuysFromRolla.com, has been applying Microsoft Web technology since 1998. Scott is an independent technical consultant, trainer, writer, recently completed a new book to be published by Sams Press, proficient in asp.net 2.0 within 24 hours. His contact email is mitchell@4guysfromrolla.com, or he can contact him through his blog Http://ScottOnWriting.NET.