Working with detailsview without using datasource controls - Part 39

Suggested Videos 
Part 36 - Drilldown and display hierarchical data in gridview without using datasource controls
Part 37 - Detailsview in asp.net
Part 38 - Using objectdatasource control with detailsview



In Part 37 of asp.net gridview tutorial, we discussed about using sqldatasource control with detailsview, and in Part 38, we discussed about using objectdatasource control. In this video, we will discuss about working with detailsview without using any datasource control.



In a gridview control, I just want to show 3 columns (Id, FirstName and City) from tblEmployee table. As soon as I select a row, in the gridview control, then all the columns of the selected row, should be displayed in details view control as shown below.


We will be using tblEmployee table for this demo. If you need sql script to create this table, please refer to Part 37 by clicking here. We will be using EmployeeDataAccessLayer, that we coded in Part 38. If you need EmployeeDataAccessLayer code, please refer to Part 38, by clicking here.

Drag and drop a gridview control and a detailsview control on webform1.aspx.
1. Configure GridView1, to include 1 TemplateField and 3 BoundFields.
2. The TemplateField should contain an ItemTemplate, which includes a linkbutton, that the user can click.
3. Set the CommandName property of the LinkButton to SelectFullDetails.
4. Configure the rest of the BoundFields to get data from Id, FirstName and City properties.
5. Set AutoGenerateColumns property of GridView1 to false.
6. Finally generate RowCommand event handler method for GridView1.
7. Set DataKeyNames property of GridView1
DataKeyNames="Id"

At this point the HTML on WebForm1.aspx should be as shown below
<asp:GridView ID="GridView1" runat="server" 
    AutoGenerateColumns="False" 
    onrowcommand="GridView1_RowCommand" 
    DataKeyNames="Id">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" 
                    runat="server" 
                    CommandName="SelectFullDetails">
                    Select
                </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Id" 
            HeaderText="Id" />
        <asp:BoundField DataField="FirstName" 
            HeaderText="FirstName" />
        <asp:BoundField DataField="City" 
            HeaderText="City" />
    </Columns>
</asp:GridView>
<br />
<asp:DetailsView ID="DetailsView1" runat="server">
</asp:DetailsView>

Copy and paste the following code in webform1.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.DataSource = 
            EmployeeDataAccessLayer.GetAllEmployeesBasicDetails();
        GridView1.DataBind();
    }
}

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "SelectFullDetails")
    {
        int rowIndex = 
            ((GridViewRow)((LinkButton)e.CommandSource).NamingContainer).RowIndex;
        GridView1.SelectRow(rowIndex);

        int employeeId = Convert.ToInt32(GridView1.SelectedValue);

        List<Employee> employeeList = new List<Employee>()
        {
            EmployeeDataAccessLayer.GetEmployeesFullDetailsById(employeeId)
        };

        DetailsView1.DataSource = employeeList;
        DetailsView1.DataBind();
    }
}