Figure 6.5 The style hierarchy for the DataList and the DataGrid controls. Styles are applied from the top to the bottom. In the next series of DataList examples, the following code will be assigned to the Page_Load method: Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load Dim a As New ArrayList() a.Add(New Employee(1, “GlennLast”, “Glenn”, 50000)) a.Add(New Employee(2, “JoeLast”, “Joe”, 42000)) a.Add(New Employee(3, “MaryLast”, “Mary”, 31000)) a.Add(New Employee(4, “FrankLast”, “Frank”, 36000)) a.Add(New Employee(5, “AnneLast”, “Anne”, 24000)) DataList1.DataSource = a DataBind() End Sub Control Style backcolor=style; font=arial backcolor=silver; font=arial Effective StyleStyle Hierarchy backcolor=silver; font=arial; font-bold=true backcolor=silver; font=arial; font-italic=true backcolor=red; font=arial backcolor=red; font=arial; font-bold=true Item: backcolor=yellow; font=arial; font-bold=false Alternate: backcolor=yellow; font=arial; font-bold=true Item: backcolor=yellow; font=system; font-bold=false Alternate: backcolor=yellow; font=system; font-bold=true Header Style font-bold=true Footer Style font-italic=true Item Style backcolor=red Alternating Item Style font-bold-true Selected Item Style backcolor=yellow Edit Item Style font=system 208 Chapter 6 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 208 This code uses the Employee class that was used in the previous Repeater examples, and five Employee instances are being added to an ArrayList. In this example, the DataList is placed on to the Web page and the fields are placed into the item template as follows. <asp:DataList id=DataList1 runat=”server”> <itemtemplate> <%# string.Format(“{0:D4}”,Container.DataItem.EID ) %> <%# DataBinder.Eval(Container.DataItem, “LastName”)%> <%# DataBinder.Eval(Container.DataItem, “FirstName”)%> <%# DataBinder.Eval(Container.DataItem, “Salary”,”{0:C}”)%> </ItemTemplate> </asp:DataList> The browser output (see the left window in Figure 6.6) shows a line for each employee. Taking a peek at the browser’s source code reveals that the DataList generated a table with one cell for each of the employees. Figure 6.6 Shows a line (left) for each employee and then (right) shows a cleaner version, with a table embedded into the item template. Using Data-Bound Web Controls 209 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 209 In the next example, some formatting is added by placing a table inside the item template, as shown in the following code: <asp:DataList id=DataList1 runat=”server”> <itemtemplate> <table> <tr><td>Employee ID:</td> <td><b><%# string.Format(“{0:D4}”,Container.DataItem.EID ) %></b> </td></tr> <tr><td>Employee Name: </td> <td><b><%# DataBinder.Eval(Container.DataItem, “LastName”)%>, <%# DataBinder.Eval(Container.DataItem, “FirstName”)%></b> </td></tr> <tr><td>Salary: </td> <td><b> <%# DataBinder.Eval(Container.DataItem, “Salary”,”{0:C}”)%> </b></td></tr> </table> </ItemTemplate> </asp:DataList> This code will nest a table inside each of the cells that the DataList originally produced. The browser output (see the right window in Figure 6.6) shows a much cleaner appearance. Although the last example was cleaner looking, it lacks a header, and it can be difficult to see where one employee ends and another employee starts. In the following example, an alternate item style is created. This is better than the Repeater, because the layout from the item template does not need to be copied. A header and footer are supplied here as well. <asp:DataList id=DataList1 runat=”server”> <headerstyle backcolor=”black” forecolor=”white” font-bold=”True” horizontalalign=”Center”> </headerstyle> <alternatingitemstyle backcolor=”silver”> </alternatingitemstyle> <footerstyle backcolor=”black” forecolor=”white” font-bold=”True” horizontalalign=”Center”> </footerstyle> <headertemplate> Employee List </headertemplate> <itemtemplate> <table> 210 Chapter 6 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 210 <tr><td>Employee ID:</td> <td><b> <%# string.Format(“{0:D4}”,Container.DataItem.EID ) %> </b> </td></tr> <tr><td>Employee Name: </td> <td><b> <%# DataBinder.Eval(Container.DataItem, “LastName”)%>, <%# DataBinder.Eval(Container.DataItem, “FirstName”)%> </b> </td></tr> <tr><td>Salary: </td> <td><b> <%# DataBinder.Eval(Container.DataItem, “Salary”,”{0:C}”)%> </b></td></tr> </table> </ItemTemplate> <footertemplate> End of List </footertemplate> </asp:DataList> The browser output (see Figure 6.7) shows a very readable list of employees. The data is in the item template, and the formatting is in the style elements. Figure 6.7 A much cleaner list of employees, with a header, a footer, and an alternating style. Using Data-Bound Web Controls 211 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 211 Figure 6.8 The effect of setting the RepeatColumns to 3, the RepeatDirection to Horizontal, the GridLines to Both, and the BorderColor to Black. As the list of employees gets longer, it will be necessary to come up with a way to fill the screen with employees instead of having a narrow column of employees. That is where the RepeatColumns and RepeatDirection come into play. Figure 6.8 shows an example of setting the RepeatColumns to three and the RepeatDirection to Horizontal. In this example, the GridLines property is set to Both and the BorderColor is set to Black. Notice that the RepeatDirection can also be set to Vertical, which will cause the employee list to be rendered downward in vertical columns. Selecting an Item The DataList can allow a user to select an item. This is usually desirable when only a small amount of data is being displayed and more details are desired. Making a selection involves setting the SelectedIndex to a number other than minus one (-1), which is the default. This can be done by creating an Item- Command method, which will change the selection number. There is one small problem, which is that the SelectedIndex must be set before the data is bound to the DataList. Currently, our data is being bound in the Page_Load method. This is only acceptable when the data is not being posted to the server (the first time to the page). The code to create the employ- ees will be placed into a procedure called BindEmployees as follows: Private Sub Page_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load If Not IsPostBack() Then BindEmployees() End If End Sub 212 Chapter 6 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 212 Public Sub BindEmployees() Dim a As New ArrayList() a.Add(New Employee(1, “GlennLast”, “Glenn”, 50000)) a.Add(New Employee(2, “JoeLast”, “Joe”, 42000)) a.Add(New Employee(3, “MaryLast”, “Mary”, 31000)) a.Add(New Employee(4, “FrankLast”, “Frank”, 36000)) a.Add(New Employee(5, “AnneLast”, “Anne”, 24000)) DataList1.DataSource = a DataList1.DataBind() End Sub An event method must be created in the code-behind page to set the Selected- Index of the DataList when a button is clicked. Do this by clicking the Class Name drop-down list and clicking DataList1. In the Method drop-down list, click ItemCommand, which inserts code for this event. In this method, add code to set the SelectedIndex and call the BindEmployees method as follows: Private Sub DataList1_ItemCommand(ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) _ Handles DataList1.ItemCommand DataList1.SelectedIndex = e.Item.ItemIndex BindEmployees() End Sub Another event method must be added in the code-behind page to clear the SelectedIndex when no details are desired. Do this by clicking the Class Name drop-down list and then clicking DataList1. In the Method drop-down list, click CancelCommand, which inserts code for the event. In this method, add code to set the SelectedIndex to minus one (-1) and call the BindEmployees method as follows: Private Sub DataList1_CancelCommand(ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) _ Handles DataList1.CancelCommand DataList1.SelectedIndex = -1 BindEmployees() End Sub Finally, the item template is modified to display a Display Details button and the employee’s full name. The selected item template contains all the details plus a Hide Details button. The following code contains the completed DataList1 control: <asp:datalist id=DataList1 runat=”server” GridLines=”Both” bordercolor=”black” > <headertemplate> Employee List </HeaderTemplate> Using Data-Bound Web Controls 213 430234 Ch06.qxd 7/8/03 1:49 PM Page 213 <alternatingitemstyle backcolor=”Silver”> </AlternatingItemStyle> <selecteditemstyle backcolor=”yellow”> </selecteditemstyle> <footertemplate> End of List </FooterTemplate> <selecteditemtemplate> <table> <tr><td colspan=”2”> <asp:linkbutton id=”Linkbutton2” runat=”server” text=”Hide Details” commandname=”cancel” /> </td></tr> <tr><td>Employee ID:</td> <td><b> <%# string.Format(“{0:D4}”,Container.DataItem.EID ) %> </b> </td></tr> <tr><td>Employee Name: </td> <td><b> <%# DataBinder.Eval(Container.DataItem, “LastName”)%>, <%# DataBinder.Eval(Container.DataItem, “FirstName”)%> </b> </td></tr> <tr><td>Salary: </td> <td><b> <%# DataBinder.Eval(Container.DataItem, “Salary”,”{0:C}”)%> </b></td></tr> </table> </selecteditemtemplate> <itemtemplate> <table> <tr><td colspan=”2”> <asp:linkbutton id=”LinkButton1” runat=”server” text=”Show Details” commandname=”select” /> </td></tr> <tr><td>Employee Name: </td> <td><b> <%# DataBinder.Eval(Container.DataItem, “LastName”)%>, <%# DataBinder.Eval(Container.DataItem, “FirstName”)%> </b> </td></tr> </table> </ItemTemplate> <footerstyle font-bold=”True” horizontalalign=”Center” forecolor=”White” backcolor=”Black”> </FooterStyle> <headerstyle font-bold=”True” horizontalalign=”Center” forecolor=”White” backcolor=”Black”> </HeaderStyle> </asp:datalist> 214 Chapter 6 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 214 Figure 6.9 Employee list with no employee details selected (left) and with employee 0003 selected (right). The browser output (see Figure 6.9) shows the items without and with an employee selected. If the Show Details is clicked on a different employee, that employee’s details are exposed. Editing an Item The DataList can allow a user to edit an item. Editing an item involves setting the EditItemIndex to a number other than minus one (-1), which is the default. This can be done by creating an EditCommand method, which will change the edit item number. There is one small problem: Our data in the ArrayList is not persisted, so the ArrayList is being recreated every time that data is posted back to the server. The BindEmployee method has been changed to store the ArrayList in a Ses- sion variable. Session variables are available throughout the browser session and will be covered in more detail in Chapter 12, “ASP.NET Applications.” The following is the revised BindEmployees method: Public Sub BindEmployees() ‘create employee list if it ‘does not exist If Session(“Employees”) Is Nothing Then Dim a As New ArrayList() a.Add(New Employee(1, “GlennLast”, “Glenn”, 50000)) a.Add(New Employee(2, “JoeLast”, “Joe”, 42000)) a.Add(New Employee(3, “MaryLast”, “Mary”, 31000)) a.Add(New Employee(4, “FrankLast”, “Frank”, 36000)) a.Add(New Employee(5, “AnneLast”, “Anne”, 24000)) Using Data-Bound Web Controls 215 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 215 Session(“Employees”) = a End If DataList1.DataSource = Session(“Employees”) DataList1.DataBind() End Sub An event method must be created in the code-behind page to set the Edit- ItemIndex of the DataList when a button is clicked. Do this by clicking the Class Name drop-down list and then clicking DataList1. In the Method drop-down list, click EditCommand, which inserts code for this event. In this method, add code to set the EditItemIndex, and call the BindEmployees method as follows: Private Sub DataList1_EditCommand(ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) _ Handles DataList1.EditCommand DataList1.EditItemIndex = e.Item.ItemIndex BindEmployees() End Sub The CancelCommand must be modified to set the EditItemIndex to minus one (-1) if editing is cancelled: Private Sub DataList1_CancelCommand(ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs) _ Handles DataList1.CancelCommand If DataList1.EditItemIndex = -1 Then DataList1.SelectedIndex = -1 Else DataList1.EditItemIndex = -1 End If BindEmployees() End Sub The selected item template has been changed to have an Edit button beside the Hide Details button. Also, an edit item template needs to be added to the DataList. The following is the revised selected item template and the new edit item template: <selecteditemtemplate> <table> <tr> <td> <asp:linkbutton id=”itemCancel” runat=”server” text=”Hide Details” commandname=”cancel” /> </td> <td> <asp:linkbutton id=”itemEdit” runat=”server” text=”Edit” commandname=”edit” /> </td> </tr> 216 Chapter 6 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 216 <tr><td>Employee ID:</td> <td><b> <%# string.Format(“{0:D4}”,Container.DataItem.EID ) %> </b> </td></tr> <tr><td>Employee Name: </td> <td><b> <%# DataBinder.Eval(Container.DataItem, “LastName”)%>, <%# DataBinder.Eval(Container.DataItem, “FirstName”)%> </b> </td></tr> <tr><td>Salary: </td> <td><b> <%# DataBinder.Eval(Container.DataItem, “Salary”,”{0:C}”)%> </b></td></tr> </table> </SelectedItemTemplate> <edititemtemplate> <table> <tr> <td> <asp:linkbutton id=”editCancel” runat=”server” text=”Cancel” commandname=”cancel” /> </td> <td> <asp:linkbutton id=”editUpdate” runat=”server” text=”Update” commandname=”update” /> </td> </tr> <tr><td>Employee ID:</td> <td><b> <asp:label id=”empID” runat=”server” Text=’<%# string.Format(“{0:D4}”,Container.DataItem.EID ) %>’ /> </b> </td></tr> <tr><td>Last: </td> <td> <asp:textbox id=”empLast” runat=”server” Text=’<%# DataBinder.Eval(Container.DataItem, “LastName”)%>’ /> </td></tr> <tr><td>First: </td> <td> <asp:textbox id=”empFirst” runat=”server” Text=’<%# DataBinder.Eval(Container.DataItem, “FirstName”)%>’ /> </td></tr> <tr><td>Salary: </td> <td> <asp:textbox id=”salary” runat=”server” Text=’<%# DataBinder.Eval(Container.DataItem, “Salary”)%>’ /> </td></tr> </table> </edititemtemplate> Using Data-Bound Web Controls 217 h 430234 Ch06.qxd 7/1/03 9:01 AM Page 217 [...]... Table 6. 6 Table 6. 6 New Column Properties COLUMN PROPERTY VALUE ProductName HeaderText ProductName ProductName HeaderStyle.HorizontalAlign HorizontalAlign.Center ProductName ItemStyle.HorizontalAlign HorizontalAlign.Left ProductName DataField ProductName UnitsInStock HeaderText Units InStock UnitsInStock HeaderStyle.HorizontalAlign HorizontalAlign.Center Using Data-Bound Web Controls Table 6. 6... shown in Figure 6. 14 Using Data-Bound Web Controls Figure 6. 14 The ItemCommand event has been used to retrieve the current employee ID and display it in a Label control Editing an Item The DataGrid can allow a user to edit an item Editing an item involves setting the EditItemIndex to a number other than minus one (-1 ), which is the default This is done by clicking the Class Name drop-down list and... template that displays End of List with a silver background The font should be xx-small size and centered Your HTML for the ProductsGrid should look like the following: Product List Using Data-Bound Web Controls Product Name: . backcolor=yellow; font=arial; font-bold=true Item: backcolor=yellow; font=system; font-bold=false Alternate: backcolor=yellow; font=system; font-bold=true Header Style font-bold=true Footer Style font-italic=true Item. UnitType.Pixel) DataGrid1.Columns.Add(col) DataGrid1.Attributes(“SalaryCol”) = _ DataGrid1.Columns.Count - 1 End Sub 2 26 Chapter 6 h 430234 Ch 06. qxd 7/1/03 9:01 AM Page 2 26 Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, _ ByVal. Style backcolor=red Alternating Item Style font-bold-true Selected Item Style backcolor=yellow Edit Item Style font=system 208 Chapter 6 h 430234 Ch 06. qxd 7/1/03 9:01 AM Page 208 This code uses