Create a Simple Master/Detail in ASP.NET Using DataList and DataGrid

[]

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

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru