Using Boundfields in DetailsView Control

By default, the DetailsView control displays all the fields from the data source. Because the AutoGenerateRows property is set to true by default, the DetailsView control displays all the fields from the datasource control.

To establish control over displaying columns in a DetailsView control, we define a BoundField object for each column to be displayed in the DetailsView. When we use a BoundField for displaying a column, the data is displayed as text.

We can customize the header text to be displayed for each column in the DetailsView by setting the HeaderText property of the BoundField object. To format the data displayed in the DetailsView column, we use DataFormatString property of BoundField. To specify the name of the field that the BoundField displays in a DetailsView control, we use the DataField property.

Other properties of <BoundField> column which we use to style the DetailsView control are FooterStyle to enable footer column formatting, FooterText to enable text display in the column footer, HeaderStyle to enable header column formatting, HeaderText to enable text display in the column header and ItemStyle to enable formatting a data item.

DetailsView control provides a <Fields> section which is similar to a GridView's <Columns> section. In the <Fields> section, we declare <BoundField> elements or <TemplateField> elements. Some of the other elements we can use in a DetailsView control <Fields> section are: <asp:ImageField>, <asp:CheckBoxField>, <asp:CommandField>, <asp:ButtonField> and <asp:HyperLinkField>.

To use the BoundFields in the DetailsView control, we need to follow the below steps:

The first step is to declare a DetailsView control and set the AutoGenerateRows property to 'false'.

Configure the SqlDataSource control and bind it to the DetailsView control. When configuring the SqlDataSource control, we provide commands for four operations - Select, Update, Insert and Delete. After configuring the SqlDataSource control, the DetailsView control is bound to the SqlDataSource control.

We set DataKeyNames property of DetailsView control to the name of the primary key column. In the example code given below, the primary key column is "Code".

Lastly, define a <asp:BoundField> element for each column we want to display as text in the DetailsView control. Using the DataField property of a BoundField element, specify the name of the field to be displayed.



<asp:DetailsView ID="DetailsView1" runat="server"   
   AllowPaging="true" DataKeyNames="Code" 
   DataSourceID="MyDataSource"    AutoGenerateRows="false" 
   AutoGenerateInsertButton="true"   
   AutoGenerateEditButton="true">
   <Fields>
     <asp:BoundField  DataField="Name" HeaderText="Name" />
     <asp:BoundField  DataField="description" HeaderText="description" />
    </Fields>
</asp:DetailsView>

<asp:SqlDataSource ID="MyDataSource"  
ConnectionString="<%$Connectionstrings:ERPConnectionString%>"
SelectCommand="SELECT * FROM Sample" 
UpdateCommand="Update SAMPLE SET Name=@Name,description=@description Where Code=@Code"
DeleteCommand="Delete SAMPLE Where Code=@Code" 
InsertCommand="Insert SAMPLE(Code,Name,description) VALUES(@Code,@Name,@description)"
runat="server"/>


output of DetailsView Control with Boundfields