[]
In this post, I will show you how to create a master-detail page using asp.net
DataGrid and DataList.
Check out the following code it's a very simple and self-explanatory code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DrillDown.aspx.cs" Inherits="DrillDown" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<asp:DataList ID="folderList" runat="server" BorderColor="#CC9966" BorderStyle="None"
BorderWidth="1px" BackColor="White" CellPadding="4" Font-Names="Arial" Font-Size="X-Small"
GridLines="Both" OnItemCommand="folderList_ItemCommand1">
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<HeaderTemplate>
<b>Full Name</b>
</HeaderTemplate>
<SelectedItemTemplate>
<asp:LinkButton ID="Linkbutton2" runat="server" CommandName="Select" CommandArgument='<%# DataBinder.Eval( Container.DataItem, "FullName" ) %>'>
<%# DataBinder.Eval( Container.DataItem, "FullName" ) %>
</asp:LinkButton>
<table width="100%" border="0">
<tr>
<td width="30%">
</td>
<td width="70%">
<asp:DataGrid ID="Datagrid1" runat="server" AutoGenerateColumns="False" BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="4" Font-Size="X-Small">
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="Name" HeaderText="Name"></asp:BoundColumn>
<asp:BoundColumn DataField="Extension" HeaderText="Extension"></asp:BoundColumn>
<asp:BoundColumn DataField="LastWriteTime" HeaderText="LastWriteTime"></asp:BoundColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
</asp:DataGrid>
</td>
</tr>
</table>
</SelectedItemTemplate>
<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select" CommandArgument='<%# DataBinder.Eval( Container.DataItem, "FullName" ) %>'>
<%# DataBinder.Eval( Container.DataItem, "FullName" ) %>
</asp:LinkButton>
</ItemTemplate>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
</asp:DataList></form>
</body>
</html>
The ItemTemplate would serve as the normal view and the SelectedTemplate would server as the view for the page when a selection is done. It is also in this part where we have placed the DataGrid since we want to show the details based on selection. Also note that we have setupped the CommandArgument for The linkbutton to the Fullname column
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
using System.Drawing;
public partial class DrillDown : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindFolderList();
}
}
private void BindFolderList()
{
//set the startup location
string rootFolderLocation = @"C:\";
//create a new DirectoryInfo that would read our rootFolderLocation
DirectoryInfo dInfo = new DirectoryInfo(rootFolderLocation);
//Assign the DataSource and bind it to our DataList
folderList.DataSource = dInfo.GetDirectories();
folderList.DataBind();
}
private void folderList_ItemCommand(object source, DataListCommandEventArgs e)
{
}
protected void folderList_ItemCommand1(object source, DataListCommandEventArgs e)
{ //set the selected index
folderList.SelectedIndex = e.Item.ItemIndex;
//change the background color
folderList.SelectedItemStyle.BackColor = Color.AntiqueWhite;
//initiate the rebind
BindFolderList();
//find the DataGrid from the SelectedItemTemplate of our DataList
Control ctl = folderList.SelectedItem.FindControl("Datagrid1") as Control;
//Check whether the control is a DataGrid
if (ctl is DataGrid)
{
//create a pointer to our grid
DataGrid fileGrid = (DataGrid)ctl;
//read the selected directory
DirectoryInfo cInfo = new DirectoryInfo(e.CommandArgument.ToString());
//Assign the DataSource and bind it to our DataGrid
fileGrid.DataSource = cInfo.GetFiles();
fileGrid.DataBind();
}
}
}