How To: Create a simple Drill-Down/Master-Detail view with a DataList and DataGrid

<%@ 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%">
                          &nbsp;
                      </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();
       }
   }
}

2 comments: