<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
<asp:Label ID="lblError" runat="server" SkinID="ErrorLabel" EnableViewState="False"></asp:Label>
<table width="100%" cellpadding="2" cellspacing="0">
<tr valign="top" class="ArticleTitle">
<td style="padding-left:10px;" valign="middle">
asp:DetailsView control</td>
</tr>
<tr>
<td class="ArticleContents">
DetailsView control is a data-bound control that renders a single record at a time.
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
<div class="ArticleContents">
DetailsView control is a data-bound control that renders a single record at a time. It can provide navigation option also.
It can insert, update and delete the record also. When it is rendered on the page, generally it is implemented through <table> HTML tag.
<p>
Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
are implemented through style properites of <tahle> tag.
</p>
Following are some important properties that are very useful.
<table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>
<th colspan="2" align="left">
Behavior Properties of the DetailsView Control
</th>
</tr>
<tr>
<td class="DemoCP">AllowPaging</td>
<td>
true/false. Indicate whether the control should support navigation.
</td>
</tr>
<tr>
<td class="DemoCP">DataSource</td>
<td>
Gets or sets the data source object that contains the data to populate the control.
</td>
</tr>
<tr>
<td class="DemoCP">DataSourceID</td>
<td>
Indicate the bound data source control to use (Generally used when we are using SqlDataSource or AccessDataSource to bind the data, See 1st Grid example).
</td>
</tr>
<tr>
<td class="DemoCP">AutoGenerateEditButton</td>
<td>
true/false. Indicates whether a separate column with edit link/button should be added to edit the record.
</td>
</tr>
<tr>
<td class="DemoCP">AutoGenerateDeleteButton</td>
<td>
true/false. Indicates whether a separate column with delete link/button should be added to delete the record.
</td>
</tr>
<tr>
<td class="DemoCP">AutoGenerateRows</td>
<td>
true/false. Indicate whether rows are automatically created for each field of the data source. The default is true.
</td>
</tr>
<tr>
<td class="DemoCP">DefaultMode</td>
<td>
read-only/insert/edit. Indicate the default display mode.
</td>
</tr>
<tr>
<th colspan="2" align="left">
Style Properties of the DetailsView Control
</th>
</tr>
<tr>
<td class="DemoCP">AlternatingRowStyle</td>
<td>
Defines the style properties for every alternate row in the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">EditRowStyle</td>
<td>
Defines the style properties for the row in EditView (When you click Edit button for a row, the row will appear in this style).
</td>
</tr>
<tr>
<td class="DemoCP">RowStyle</td>
<td>
Defines the style properties of the rows of the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">PagerStyle</td>
<td>
Defines the style properties of Pager of the DetailsView. (If AllowPaging=true, the page number row appears in this style)
</td>
</tr>
<tr>
<td class="DemoCP">EmptyDataRowStyle</td>
<td>
Defines the style properties of the empty row, which appears if there is no records in the data source.
</td>
</tr>
<tr>
<td class="DemoCP">HeaderStyle</td>
<td>
Defines the style properties of the header of the DetailsView. (The column header appears in this style.)
</td>
</tr>
<tr>
<td class="DemoCP">FooterStyle</td>
<td>
Defines the style properties of the footer of DetailsView.
</td>
</tr>
<tr>
<th colspan="2" align="left">
Appearance Properties of the DetailsView Control
</th>
</tr>
<tr>
<td class="DemoCP">CellPadding</td>
<td>
Indicates the amount of space in pixel between the cells and the border of the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">CellSpacing</td>
<td>
Indicates the amount of space in pixel between cells.
</td>
</tr>
<tr>
<td class="DemoCP">GridLines</td>
<td>
Both/Horizontal/Vertical/None. Indicates whether GrdiLines should appear or not, if yes Horizontal, Vertical or Both.
</td>
</tr>
<tr>
<td class="DemoCP">HorizontalAlign</td>
<td>
Indicates the horizontal alignment of the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">EmptyDataText</td>
<td>
Indicates the text to appear when there is no record in the data source.
</td>
</tr>
<tr>
<td class="DemoCP">BackImageUrl</td>
<td>
Indicates the location of the image that should display as a background of the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">Caption</td>
<td>
Gets or sets the caption of the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">CaptionAlign</td>
<td>
left/center/right. Gets or sets the horizontal position of the DetailsView caption.
</td>
</tr>
<tr>
<th colspan="2" align="left">State Properties of DetailsView Control</th>
</tr>
<tr>
<td class="DemoCP">Rows</td>
<td>
Gets the collection of objects that represent the rows in the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">FooterRow</td>
<td>
Returns a DetailsViewRow object that represents the footer of the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">HeaderRow</td>
<td>
Returns a DetailsViewRow object that represents the header of the DetailsView.
</td>
</tr>
<tr>
<td class="DemoCP">PageCount</td>
<td>
Gets the number of the pages required to display the records of the data source.
</td>
</tr>
<tr>
<td class="DemoCP">PageIndex</td>
<td>
Gets or sets the 0-based page index.
</td>
</tr>
<tr>
<td class="DemoCP">DataKeyNames</td>
<td>
Gets an array that contains the names of the primary key field of the currently displayed rows in the DetailsViewRow.
</td>
</tr>
<tr>
<td class="DemoCP">DataKeys</td>
<td>
Gets a collection of DataKey objects that represent the value of the primary key fields set in DataKeyNames property of the DetailsViewRow.
</td>
</tr>
<tr>
<th colspan="2" align="left">
Events of the DetailsView Control
</th>
</tr>
<tr>
<td class="DemoCP">ItemCommand</td>
<td>
Fires when any clickable element on the control is clicked.
</td>
</tr>
<tr>
<td class="DemoCP">ItemCreated</td>
<td>
Fires after DetailsView fully creates all rows of the record.
</td>
</tr>
<tr>
<td class="DemoCP">ItemDeleting, ItemDeleted</td>
<td>
Both event fires when current record is deleted. The first one fires before and other fires after record is deleted.
</td>
</tr>
<tr>
<td class="DemoCP">ItemInserting, ItemInserted</td>
<td>
Both event fires when an item is inserted. The first one fires before and second after the item is created.
</td>
</tr>
<tr>
<td class="DemoCP">ItemUpdating, ItemUpdated</td>
<td>
Both event fires when an item is updated. The first one fires before and second fires after the record is updated.
</td>
</tr>
<tr>
<td class="DemoCP">ModeChanging, ModeChanged</td>
<td>
Both event fires when DetailsView change its display mode. The first one fires before and second fires after display mode is changed.
</td>
</tr>
<tr>
<td class="DemoCP">PageIndexChanging, PageIndexChanged</td>
<td>
Both event fires when the DetailsView move to another record. The first one fires before and second fires after page is changed.
</td>
</tr>
</table>
<!-- START - Demo Section -->
<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
<tr>
<td class="DemoTitle">
DEMO : DetailsView
</td>
<td align="right">
<a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/detailsview.aspx" target="_blank">Show Source Code</a>
</td>
</tr>
<tr valign="Top">
<td>
<asp:DetailsView ID="DetailsView1" runat="Server" CellPadding="4" ForeColor="#333333" GridLines="None"
Width="100%" DataSourceID="SqlDataSource1" AllowPaging="True" AutoGenerateRows="False" DataKeyNames="AutoID"
AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" AutoGenerateInsertButton="True"
EmptyDataText="<b>Sorry, There are no records to show in DetailsView. Try Inserting records from <a href='formview.aspx'>FormView Control</a> tutorial.</b>">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
<EditRowStyle BackColor="#999999" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Fields>
<asp:TemplateField HeaderText="AutoID">
<ItemTemplate>
<%# Eval("AutoID") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="Phone" HeaderText="Phone" />
<asp:BoundField DataField="City" HeaderText="City" />
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:ConnStr %>'
SelectCommand="Select * FROM SampleForTutorials ORDER BY [Name]"
DeleteCommand="Delete FROM SampleForTutorials WHERE AutoID = @AutoID"
UpdateCommand="UPDATE SampleForTutorials SET Name = @Name, Address = @Address, Phone = @Phone, City = @City WHERE AutoID = @AutoID"
InsertCommand="INSERT INTO SampleForTutorials (Name, Address, Phone, City) VALUES (@Name, @Address, @Phone, @City)">
<DeleteParameters>
<asp:Parameter Name="AutoID" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="AutoID" Type="Int32" />
<asp:Parameter Name="Name" Type="string" Size="50" />
<asp:Parameter Name="Address" Type="string" Size="200" />
<asp:Parameter Name="Phone" Type="string" Size="50" />
<asp:Parameter Name="City" Type="string" Size="20" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Name" Type="string" Size="50" />
<asp:Parameter Name="Address" Type="string" Size="200" />
<asp:Parameter Name="Phone" Type="string" Size="50" />
<asp:Parameter Name="City" Type="string" Size="20" />
<asp:Parameter Name="AutoID" Type="Int32" />
</InsertParameters>
</asp:SqlDataSource>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
<pre>
// DetailsView control
<asp:DetailsView ID="DetailsView1" runat="Server" CellPadding="4" ForeColor="#333333" GridLines="None"
Width="100%" DataSourceID="SqlDataSource1" AllowPaging="True" AutoGenerateRows="False" DataKeyNames="AutoID"
AutoGenerateDeleteButton="True" AutoGenerateEditButton="True" AutoGenerateInsertButton="True" >
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<CommandRowStyle BackColor="#E2DED6" Font-Bold="True" />
<EditRowStyle BackColor="#999999" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<FieldHeaderStyle BackColor="#E9ECF1" Font-Bold="True" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Fields>
<asp:TemplateField HeaderText="AutoID">
<ItemTemplate>
<%# Eval("AutoID") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:BoundField DataField="Phone" HeaderText="Phone" />
<asp:BoundField DataField="City" HeaderText="City" />
</Fields>
</asp:DetailsView>
// SqlDataSource control
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:ConnStr %>'
SelectCommand="Select * FROM SampleForTutorials ORDER BY [Name]"
DeleteCommand="Delete FROM SampleForTutorials WHERE AutoID = @AutoID"
UpdateCommand="UPDATE SampleForTutorials SET Name = @Name, Address = @Address, Phone = @Phone, City = @City WHERE AutoID = @AutoID"
InsertCommand="INSERT INTO SampleForTutorials (Name, Address, Phone, City) VALUES (@Name, @Address, @Phone, @City)">
<DeleteParameters>
<asp:Parameter Name="AutoID" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="AutoID" Type="Int32" />
<asp:Parameter Name="Name" Type="string" Size="50" />
<asp:Parameter Name="Address" Type="string" Size="200" />
<asp:Parameter Name="Phone" Type="string" Size="50" />
<asp:Parameter Name="City" Type="string" Size="20" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Name" Type="string" Size="50" />
<asp:Parameter Name="Address" Type="string" Size="200" />
<asp:Parameter Name="Phone" Type="string" Size="50" />
<asp:Parameter Name="City" Type="string" Size="20" />
<asp:Parameter Name="AutoID" Type="Int32" />
</InsertParameters>
</asp:SqlDataSource>
</pre>
</td>
</tr>
</table>
<!-- END - Demo Section -->
</div>
<br />
<script language="javascript" type="text/javascript">
function GiveAlertToUser()
{
alert("Hi Dear, Client side method worked.");
}
</script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>
Go Top