Enabling Item Selection Using the DataGrid and DataList

DataGrid and DataList "-->

only for RuBoard

Enabling Item Selection Using the `DataGrid` and `DataList`

The final feature I want to discuss is how to enable item selection. When you enable item selection, users can click on a button or LinkButton to select a row out of the DataGrid or DataList . For example, the user could highlight a particular row in the control for easy reading. Listing 10.6 illustrates how to implement Item Selection using the DataGrid .

Listing 10.6 Enabling Item Selection Using the `DataGrid`

 [Visual Basic] 01: <%@ import namespace="System.Data" %> 02: <%@ import namespace="System.Data.SqlClient" %> 03: <script language="vb" runat="server"> 04:  private sSqlCon as string  = "server=localhost;uid=sa;pwd=;database=northwind" 05: 06:  public sub Page_Load(sender as Object, e as EventArgs) 07: 08:    if not IsPostBack then 09:     Bind() 10:    end if 11: 12:  end sub 13: 14: private sub Bind() 15: 16:   dim SqlCon as new SqlConnection(sSqlCon) 17:   dim SqlCmd as new StringBuilder() 18:    SqlCmd.Append("SELECT ProductName,UnitPrice,") 19:    SqlCmd.Append("UnitsInStock,UnitsOnOrder,") 20:    SqlCmd.Append("ProductID FROM Products") 21:   dim sda as new SqlDataAdapter(SqlCmd.ToString(),SqlCon) 22:   dim ds as new DataSet() 23:   sda.Fill(ds,"products") 24:   DGProducts.DataSource = ds.Tables("Products").DefaultView 25:   DGProducts.DataBind() 26: 27: end sub 28: 29: public sub DGProducts_ItemCommand(sender as Object, e as DataGridCommandEventArgs) 30: 31:  if e.CommandName = "select" then 32:   DGProducts.SelectedIndex = e.Item.ItemIndex 33:   Bind() 34:  end if 35: 36: end sub 37: 38: </script> 39: <html> 40:   <body> 41:    <head> 42: 43:     <style rel="stylesheet"> 44:      H3 {  font: bold 11pt Verdana, Arial, sans-serif; } 45:      .products {  font: 9pt Verdana, Arial, sans-serif; } 46:      .productsHead {  font: bold 9pt Verdana, Arial, sans-serif; 47:       background-color:Maroon; color:white; } 48:      a {  text-decoration:none; } 49:      a:hover {  text-decoration:underline; color:maroon; } 50:   </style> 51: 52:   </head> 53:     <form runat="server"> 54: <H3>Allowing Item Selection - VB.NET</H3> 55: 56: <asp:DataGrid 57:  id="DGProducts" 58:  runat="server" 59:  Cellpadding="4" Cellspacing="0" Width="750" 60:  BorderWidth="1" Gridlines="None" 61:  AlternatingItemStyle-BackColor="Tan" 62:  HeaderStyle-CssClass="productsHead" 63:  Font-Size="12" 64:  AutoGenerateColumns="false" 65:  SelectedItemStyle-BackColor = "Blue" 66:  SelectedItemStyle-ForeColor = "white" 67: 68:  OnItemCommand = "DGProducts_ItemCommand" 69:  > 70:  <Columns> 71:  <asp:ButtonColumn CommandName="select" Text="Select Row" ButtonType="LinkButton" /> 72:  <asp:BoundColumn DataField="ProductName" HeaderText="Product Name" /> 73:  <asp:BoundColumn DataField="UnitsInStock" HeaderText="Units in Stock" /> 74:  <asp:BoundColumn DataField="UnitsOnOrder" HeaderText="Units on Order" /> 75:  <asp:BoundColumn DataField="UnitPrice" HeaderText="Price Per Unit" 76:   DataFormatString="{ 0:C} " ReadOnly="true" /> 77:  <asp:BoundColumn DataField="ProductID" HeaderText="ProductID" visible="false"/> 78:  </columns> 79: </asp:DataGrid> 80:   </form> 81:  </body> 82: </html> [C#Replace server code] 01: <%@ import namespace="System.Data" %> 02: <%@ import namespace="System.Data.SqlClient" %> 03: <script language="c#" runat="server"> 04:  private string sSqlCon = "server=localhost;uid=sa;pwd=;database=northwind"; 05: 06:  public void Page_Load(Object sender, EventArgs e){ 07: 08:    if (! IsPostBack){ 09:     Bind(); 10:    } 11: 12:  } 13: 14: private void Bind() { 15: 16:   SqlConnection SqlCon = new SqlConnection(sSqlCon); 17:   StringBuilder SqlCmd = new StringBuilder(); 18:    SqlCmd.Append("SELECT ProductName,UnitPrice,"); 19:    SqlCmd.Append("UnitsInStock,UnitsOnOrder,"); 20:    SqlCmd.Append("ProductID FROM Products"); 21:   SqlDataAdapter sda = new SqlDataAdapter(SqlCmd.ToString(),SqlCon); 22:   DataSet ds = new DataSet(); 23:   sda.Fill(ds,"products"); 24:   DGProducts.DataSource = ds.Tables["Products"].DefaultView; 25:   DGProducts.DataBind(); 26: 27: } 28: 29: public void DGProducts_ItemCommand(Object sender, DataGridCommandEventArgs e) { 30: 31:  if(e.CommandName == "select") { 32:   DGProducts.SelectedIndex = e.Item.ItemIndex; 33:   Bind(); 34:  } 35: 36: } 37: 38: </script>

When you enable item selection using the DataGrid, the first thing you want to do is create a way for the user to select an item. This example uses a Button control. Then you must set the OnItemCommand attribute to the name of the method that will handle the event. In this case, it's DGProducts_ItemCommand (lines 29 “36). In order to select a particular item out of the DataGrid , you set the DataGrid 's SelectedIndex attribute to be equal to the ItemIndex of the Item passed into the ItemCommand event in the DataGridCommandEventArgs parameter. Figure 10.6 shows the results of Listing 10.6, with an item selected.

Figure 10.6. DataGrid with an item selected.

Like all the other samples, enabling item selecting using the DataList is a little different than the DataGrid . The following, Listing 10.7, contains an example on how to enable item selection using the DataList .

Listing 10.7 Enabling Item Selection Using the `DataList` Control

 [Visual basic] 01: <%@ import namespace="System.Data" %> 02: <%@ import namespace="System.Data.SqlClient" %> 03: <script language="vb" runat="server"> 04:  private sSqlCon as string  = "server=localhost;uid=sa;pwd=;database=northwind" 05: 06:  public sub Page_Load(sender as Object, e as EventArgs) 07: 08:    if not IsPostBack then 09:     Bind() 10:    end if 11: 12:  end sub 13: 14: private sub Bind() 15: 16:   dim SqlCon as new SqlConnection(sSqlCon) 17:   dim SqlCmd as new StringBuilder() 18:    SqlCmd.Append("SELECT ProductName,UnitPrice,") 19:    SqlCmd.Append("UnitsInStock,UnitsOnOrder,") 20:    SqlCmd.Append("ProductID FROM Products") 21:   dim sda as new SqlDataAdapter(SqlCmd.ToString(),SqlCon) 22:   dim ds as new DataSet() 23:   sda.Fill(ds,"products") 24:   DLProducts.DataSource = ds.Tables("Products").DefaultView 25:   DLProducts.DataBind() 26: 27: end sub 28: 29: public sub DLProducts_ItemCommand(sender as Object,e as DataListCommandEventArgs) 30: 31:  if e.CommandName = "select" then 32:   DLProducts.SelectedIndex = e.Item.ItemIndex 33:   Bind() 34:  end if 35: 36: end sub 37: 38: </script> 39: <html> 40:   <body> 41:    <head> 42: 43:     <style rel="stylesheet"> 44:      H3 {  font: bold 11pt Verdana, Arial, sans-serif; } 45:      .products {  font: 9pt Verdana, Arial, sans-serif; } 46:      .productsHead {  font: bold 9pt Verdana, Arial, sans-serif; 47:       background-color:Maroon; color:white; } 48:      a {  text-decoration:none; } 49:      a:hover {  text-decoration:underline; color:maroon; } 50:    </style> 51: 52:   </head> 53:     <form runat="server"> 54: <center> 55:  <H3>Northwind Inventory Management - VisualBasic.NET</H3> 56: </center> 57: <asp:DataList 58:  id="DLProducts" 59:  runat="server" 60:  Cellpadding="0" Cellspacing="0" Width="750" 61:  BorderWidth="1" Gridlines="Both" 62:  AlternatingItemStyle-BackColor="Tan" 63:  HeaderStyle-CssClass="productsHead" 64:  Font-Size="12" 65:  RepeatColumns="1" 66:  Align="Center" 67:  OnItemCommand="DLProducts_ItemCommand" 68:  > 69:   <ItemTemplate> 70: 71:    <Table cellpadding="4" cellspacing="0" width="100%"> 72:     <TR> 73:      <TD ColSpan="2" class="ProductsHead"> 74:       <h3><%# DataBinder.Eval(Container.DataItem, "ProductName") %></b> 75:      </TD> 76:     </TR> 77:     <TR> 78:      <TD Width="50%" Align="Left"> 79:       <b>Units In Stock</b> 80:      </TD> 81:      <TD Width="50%" Align="Right"> 82:       <asp:Label id="lUnitsOnOrder" runat="server" 83:       Text='<%# DataBinder.Eval(Container.DataItem, "UnitsInStock") %>' 84:       /> 85:      </TD> 86:     </TR> 87:     <TR> 88:      <TD Width="50%" Align="Left"> 89:       <b>Units On Order</b> 90:      </TD> 91:      <TD Width="50%" Align="Right"> 92:       <%# DataBinder.Eval(Container.DataItem, "UnitsOnOrder") %>     </TD> 93:     </TR> 94:     <TR> 95:      <TD Width="50%" Align="Left"> 96:       <b>Price Per Unit</b> 97:      </TD> 98:      <TD Width="50%" Align="Right"> 99:       <%# DataBinder.Eval(Container.DataItem, "UnitPrice", "{ 0:C} ") %> 100:      </TD> 101:     </TR> 102:     <TR> 103:      <TD ColSpan="2" Width="100%" Align="Left"> 104:        <asp:LinkButton CommandName="select" Text="Select Item" runat="server" /> 105:      </TD> 106:      </TR> 107:    </Table> 108: 109:   </ItemTemplate> 110: 111:   <SelectedItemTemplate> 112:      <Table cellpadding="4" cellspacing="0" width="100%"> 113:       <TR> 114:        <TD ColSpan="2" Style="color:white;background-color:blue"> 115:         <h3><%# DataBinder.Eval(Container.DataItem, "ProductName") %></b> 116:        </TD> 117:       </TR> 118:       <TR> 119:        <TD Width="50%" Align="Left"> 120:         <b>Units In Stock</b> 121:        </TD> 122:        <TD Width="50%" Align="Right"> 123:         <asp:Label id="lUnitsOnOrder" runat="server" 124:         Text='<%# DataBinder.Eval(Container.DataItem, "UnitsInStock") %>' 125:         /> 126:        </TD> 127:       </TR> 128:       <TR> 129:        <TD Width="50%" Align="Left"> 130:         <b>Units On Order</b> 131:        </TD> 132:        <TD Width="50%" Align="Right"> 133:         <%# DataBinder.Eval(Container.DataItem, "UnitsOnOrder") %>     </TD> 134:       </TR> 135:       <TR> 136:        <TD Width="50%" Align="Left"> 137:         <b>Price Per Unit</b> 138:        </TD> 139:        <TD Width="50%" Align="Right"> 140:         <%# DataBinder.Eval(Container.DataItem, "UnitPrice", "{ 0:C} ") %> 141:        </TD> 142:       </TR> 143:    </Table> 144: 145:   </SelectedItemTemplate> 146: 147: </asp:DataList> 148:   </form> 149:  </body> 150: </html> [C#Replace server code] 01: <%@ import namespace="System.Data" %> 02: <%@ import namespace="System.Data.SqlClient" %> 03: <script language="c#" runat="server"> 04:  private string sSqlCon = "server=localhost;uid=sa;pwd=;database=northwind"; 05: 06:  public void Page_Load(Object sender, EventArgs e){ 07: 08:    if (! IsPostBack){ 09:     Bind(); 10:    } 11: 12:  } 13: 14: private void Bind() { 15: 16:   SqlConnection SqlCon = new SqlConnection(sSqlCon); 17:   StringBuilder SqlCmd = new StringBuilder(); 18:    SqlCmd.Append("SELECT ProductName,UnitPrice,"); 19:    SqlCmd.Append("UnitsInStock,UnitsOnOrder,"); 20:    SqlCmd.Append("ProductID FROM Products"); 21:   SqlDataAdapter sda = new SqlDataAdapter(SqlCmd.ToString(),SqlCon); 22:   DataSet ds = new DataSet(); 23:   sda.Fill(ds,"products"); 24:   DLProducts.DataSource = ds.Tables["Products"].DefaultView; 25:   DLProducts.DataBind(); 26: 27: } 28: 29: public void DLProducts_ItemCommand(Object sender, DataListCommandEventArgs e) { 30: 31:  if(e.CommandName == "select") { 32:   DLProducts.SelectedIndex = e.Item.ItemIndex; 33:   Bind(); 34:  } 35: 36: } 37: 38: </script>

The only real difference between the DataGrid and DataList is that with the DataList , you must use templates to enable item selection. You need to define an ItemTemplate and a SelectedItemTemplate . This means that a regular item can look entirely different than a selected item, which would be good for a master/detail page. An illustration of the rendered page from Listing 10.7 can be seen in Figure 10.7.

Figure 10.7. The `DataList` with an item selected.

only for RuBoard