DevCity.NET :: Using ASP.NET DataGrid Web Server Control. Page 2

DataGrid has different column types which determine the behavior of the columns in the control, such as BoundColumn, ButtonColumn, EditCommandButton, HyperLinkColumn and TemplateColumn.
In this demonstration I used a TemplateColumn type which provides the most freedom in customization. This alloww you to use any controls inside a data row.
TemplateColumn has its own layout tuning and two different set of controls for view and edit mode.
Let’s take a look at the HTML code in the ASPX page that creates the DataGrid columns:

<asp:TemplateColumn ItemStyle-Wrap="true" 
  SortExpression="ProductName" 
  HeaderText="Product Name">

  <ItemTemplate>
    <asp:Label id=Label3 runat="server" 
      Text='<%# DataBinder.Eval(Container, "DataItem.ProductName") %>'>
    </asp:Label>
  </ItemTemplate>
  <EditItemTemplate>
    <asp:RequiredFieldValidator id="RequiredFieldValidator1" 
      runat="server" 
      ErrorMessage="Product name is empty."
      Display="None" 
      ControlToValidate="ProductNameTextBox">
        Product name is empty.
    </asp:RequiredFieldValidator>



    <asp:TextBox id="ProductNameTextBox" Width="110" 
      MaxLength="40" runat="server" 
      Text='<%# DataBinder.Eval(Container, "DataItem.ProductName") %>'>
    </asp:TextBox>
    <asp:Label id="ProductIDLabel" runat="server" Visible=False 
      Text='<%# DataBinder.Eval(Container, "DataItem.ProductID") %>'>
    </asp:Label>
  </EditItemTemplate>
</asp:TemplateColumn>

As we see here, the column has two different control sets – Label for viewing mode and TextBox with a validator for edit mode. Required validator prevents the user from leaving a field empty when editing and will be described below.
Some columns are bound on table columns that have relationships with another tables. For such purposes, I used a DropDownList control in edit mode that bounded on relation table.
Let’s take a look at the HTML code that sets up a DropDownList control in edit mode:

<asp:TemplateColumn SortExpression="CategoryID" HeaderText="Category">
  <ItemTemplate>
    <asp:Label id="Label33" runat="server" Width="150" 
      Text='<%# GetCategoryName(DataBinder.Eval(Container, _
        "DataItem.CategoryID"))%>'>
    </asp:Label>
  </ItemTemplate>
  <EditItemTemplate>
    <asp:DropDownList id="CategoryDropDownList" 
      DataSource=<%# Categories%>  
      DataTextField="CategoryName" 
      DataValueField="CategoryID" 
      SelectedValue=<%# DataBinder.Eval(Container, "DataItem.CategoryID")%>
      Width="150" runat="server">
    </asp:DropDownList>
  </EditItemTemplate>
</asp:TemplateColumn>

After clicking the Edit link, the user is presented with a pre-populated DropDownList, which looks like this: