Displaying drill down rows in datagrid

• Download source files - 21.2 Kb
• Download demo project - 21.2 Kb

 

Introduction

 

In my recent project I come across a problem of displaying drill down rows in a DataGrid. It has to show a new row immediately after the selected row to accept that row information.

 

How to use

 

Add the following template column at the end of your grid and make it Visible= �False�.

 

<asp:datagrid ...>

...

<Columns>

 

<asp:TemplateColumn Visible="False">

         <HeaderStyle BorderWidth="0px">

         </HeaderStyle>

         <ItemStyle BorderWidth="0px">

         </ItemStyle>

         <ItemTemplate>

         <ItemStyle Width="1" />

         <asp:PlaceHolder ID="ExpandedContent" Visible="false" Runat="server">

                 </td>

                 </tr>

                 <tr>

                 <td class="label" colspan="11" align="left" >

                 <asp:Label ID="IntimeLabel" Runat="server" Text="In time :">

                 </asp:Label

                 <asp:TextBox id="inTimeTextBox" cssclass="tbflat"

                      Width="130px" runat="server" ReadOnly="False"  

                      Height="20px">              

                 </asp:TextBox>

                 <asp:RequiredFieldValidator id="rfvIntime"

                      runat="server" ControlToValidate="inTimeTextBox"

                      ErrorMessage="Please enter Sample in time">*

                 </asp:RequiredFieldValidator>

                 <asp:validationsummary id="validationSummary" Runat="server"         

                          ShowSummary="False" ShowMessageBox="True">

                 </asp:validationsummary>

                 <asp:Label ID="outTimeLabel" Runat="server" Text="Out time           

                          :">

                 </asp:Label

                 <asp:TextBox id="outTimeTextBox" cssclass="tbflat"          

                          Width="130px" runat="server" ReadOnly="False"               

                          Height="20px">

                 </asp:TextBox>                                                       

                 <asp:LinkButton ID="SubmitLink" Runat="server"                       

                          cssclass="breadcrumblink"                                   

                          CommandName="Submit">Submit

                 </asp:LinkButton>

                 <asp:LinkButton ID="CancelLabel" Runat="server"                      

                          CssClass="breadcrumblink" CommandName="Cancel"              

                          CausesValidation="false">Cancel

                 </asp:LinkButton>

                 </td>

                 </td>

                 </tr>

                 </asp:PlaceHolder>                                 

                 </ItemTemplate>

</asp:TemplateColumn>

    ...

    </Columns>

...

</asp:datagrid>

 

This is dynamic content  I used in my example  it shows �Intime� ,�Outtime� labels , respective textboxes with validators and submit cancel link buttons. You can customize according to your requirements.

The next step is to include the command column in your DataGrid. You may include the column at any location. On clicking of this command column the grid expands/collapses.

 

 

<asp:datagrid ...>

...

    <Columns>

     <asp:TemplateColumn>

         <HeaderTemplate>

         </HeaderTemplate>

                 <ItemTemplate>

                 <asp:LinkButton ID ="btnExpand" CommandName="Expand" Runat           

                          ="server" >DrillDown

                 </asp:LinkButton>

                 </ItemTemplate>

         </asp:TemplateColumn>

    ...

    </Columns>

...

</asp:datagrid>

 

Use following code to link OnItemCommand event to call DrilldownGrid_OnItemCommand"

 

<asp:datagrid OnItemCommand="DrilldownGrid_OnItemCommand"...>

    ...

         <Columns>

    ...

         </Columns>

...

</asp:datagrid>

 

Write the following code in DrilldownGrid_OnItemCommand method

 

public  void DrilldownGrid_OnItemCommand(object source                                

                 ,System.Web.UI.WebControls.DataGridCommandEventArgs e)

                 {

                 //Get expand Content

                 PlaceHolder  expandedContent   = (PlaceHolder)e.Item.                

                 FindControl("ExpandedContent");

                 switch(e.CommandName)

                          {

                 //If command name is "Expand" then modify the visibility of

                 expand content

                 case "Expand":

 

                          if(gridExpandState==false)

                          {

                          gridExpandState=!gridExpandState;

                          expandedContent.Visible = ! expandedContent.Visible;

                          DrilDownGrid.Columns [DrilDownGrid.Columns.Count-           

                          1].Visible =!DrilDownGrid.Columns                  

                          [DrilDownGrid.Columns.Count-1].Visible ;

                          }

                          break;

                          //Show hide expand content

                          case "Cancel":

                          {

                          gridExpandState=!gridExpandState;

                          expandedContent.Visible = ! expandedContent.Visible;

                          DrilDownGrid.Columns [DrilDownGrid.Columns.Count-           

                          1].Visible =!DrilDownGrid.Columns                  

                          DrilDownGrid.Columns.Count-1].Visible ;

                          }

                          break;

                 }

         }

 

gridExpandState is the Boolean variable used to maintain the current state of DataGrid. Define this as page property as shown.

 

protected bool gridExpandState

{

         get

         {

         object gridExpandStateObject = ViewState["gridExpandState"];

         return (gridExpandStateObject == null) ? false :    (bool)gridExpandStateObject;

         }

         set

         {

         ViewState["gridExpandState"] = value;

         }

}

 

Your DataGrid is now ready.

 

An example project is available for download. Down load and change connection string to workwith.

 

Acknowledgements

 

I must thank the all my colleagues for their help and support.

 

Usage and Copyrights

 

You may freely use/modify the supplied file for your own usage, as long as you retain the acknowledgements presented above. Please don't forget to rate this article. Thanks and good luck.