ASP. NET 2.0 data tutorial use datalist to display multiple records in one row

Introduction

In the example of datalist in the previous two chapters, we use a single-column HTML <Table> to display data. custom settings make it easy for datalist to display data in tables with multiple columns and multiple rows. data can also be displayed in multiple columns of a single row.

We can use the repeatcolumns and repeatdirection attributes to customize datalist. these two attributes determine the number of columns and the direction (horizontal or vertical) when the data is displayed ). figure 1 shows a datalist with three columns of table to display product information.

Figure 1: three products are displayed in a row of datalist.

Datalist can use the horizontal space of the screen more effectively by displaying multiple records in one row. In this chapter, we will discuss these two attributes.

Step 1: display product information in datalist

Before learning the repeatcolumns and repeatdirection attributes, we first use the standard single-column multi-row datalist to display the product information. We use the following markup language to display the product name, category, and price:

< H4 > Product Name </ H4 >
Available in the category name store for price

 

In the previous tutorial, we have already done how to bind data to datalist, so this step is coming soon. open repeatcolumnanddirection in the datalistrepeaterbasics folder. ASPX page, drag a datalist. create an objectdatasource from the smart tag of datalist and configure it using the getproducts method of the productsbll class. select none in the insert, update, and delete labels.

After the objectdatasource is created and bound to datalist, Visual Studio automatically creates an itemtemplate that displays the name and value of the product field. adjust itemtemplate-directly modify the edit Templates option in the markup language or smart tag-replace the product name, category name, and price text with the label control, use the appropriate binding syntax to bind the assigned value to the text attribute. after that, the markup language of your page should look similar to the following:

Code

< ASP: datalist ID = " Datalist1 " Runat = " Server " Datakeyfield = " Productid " Performanceid = " Objectperformance1 " Enableviewstate = " False " >
< Itemtemplate >
< H4 >
< ASP: Label runat = " Server " ID = " Productnamelabel "
Text = ' <% # Eval ("productname") %> ' > </ ASP: Label >
</ H4 >
Available In The
< ASP: Label runat = " Server " ID = " Categorynamelabel " Text = ' <% # Eval ("categoryname") %> '   />
Store For
< ASP: Label runat = " Server " ID = " Unitpricelabel " Text = ' <% # Eval ("unitprice", "{0: c}") %> '   />
</ Itemtemplate >
</ ASP: datalist >

< ASP: objectdatasource ID = " Objectperformance1 " Runat = " Server "
Oldvaluesparameterformatstring = " Original _ {0} "
Selectmethod = " Getproducts " Typename = " Productsbll " >
</ ASP: objectdatasource >

 

 

Note that the eval binding Syntax of unitprice contains a format character to convert the value to the currency format-eval ("unitprice", "{0: c }").

Browse this page in the browser, as shown in 2. datalist displays product information in a single column and multiple rows table.

Figure 2: By default, datalist displays a single column, multiple rows table

Step 2: Modify the layout direction of datalist

By default, datalist vertically uses a single column and multiple rows of table to display items (items). This can be modified using the repeatdirection attribute.

After changing the repeatdirection attribute from vertical to horizontal, datalist displays data in multiple columns in a single row. you can select repeatdirection In the designer to modify this attribute. after modification, the designer immediately adjusts the datalist layout and creates a single row and multiple columns interface (see figure 3 ).

Figure 3: The repeatdirection attribute is used to determine the layout direction of datalist items.

When displaying small amounts of data, a single-row, multi-column table might be an ideal way to maximize screen real estate. for larger volumes of data, however, a single row will require numerous columns, which pushes those items that can't fit on the screen off to the right. figure 4 shows the products when rendered in a single-row datalist. since there are invalid products (over 80), the user will have to scroll far to the right to view information about each of the products.
When a small data volume is displayed, a single row and multiple columns table is an ideal choice. when there is a large amount of data, a single row requires many columns, and the screen displays a horizontal scroll bar because it cannot display so many columns. figure 4 displays the product information in a single row of datalist. because there are too many products (81), you have to scroll to the right to view the information of each product.

Figure 4: The datalist in a single column has a horizontal scroll bar when the data volume is large,

Step 3: display data with multiple columns and multiple rows

To create a datalist with multiple rows and columns, we need to set the repeatcolumns attribute to the number of columns displayed. the default repeatcolumns attribute is 0. Therefore, datalist displays all items in a single column or in a single row (depending on the value of the repeatdirection attribute ).

We will display three products in each row in the example. Therefore, set the repeatcolumns attribute to 3. After this is done, browse the page in the browser, as shown in. 5. The product display is listed in three columns and multiple rows.

Figure 5: three products are displayed in each row.

The repeatdirection attribute affects the layout of datalist items. figure 5 shows how repeatdirection is horizontal. note that the first three products-chai, Chang, and aniseed syrup-are listed from left to right and then from top to bottom. the following three products (starting from Chef Anton's Cajun seasoning) are in the row below the start three. change repeatdirection to vertical. The layout of these products is changed from top to bottom, and then from left to right. see Figure 6.

Figure 6: Products vertical layout

The number of rows in the last 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 is a remainder, the last row or column will be filled with an empty cell. if repeatdirection is vertical, the last column will have a cell. if repeatedirection is horizontal, the last row has a cell.

Summary

By default, datalist uses a single column and multiple rows table to display items. similar to that of the gridview, only one templatefield exists. we can display multiple records in one row. you can set the repeatcolumns attribute to the number of columns in each row. in addition, the repeatdirection attribute can be used to specify that the content of a table with multiple rows and multiple columns is horizontal layout-first from left to right, then from top to bottom-or vertical-first from top to bottom, from left to right.