Click here to Skip to main content
Click here to Skip to main content

Displaying drill down rows in datagrid

, 30 Aug 2006
Rate this:
Please Sign up or sign in to vote.
Displaying drill down rows in datagrid

Sample Image - Drill_down_Datagrid.jpg

 

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.

 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Yes'B
Web Developer
India India
No Biography provided

Comments and Discussions

 
GeneralGreat article! Pinmembertemplariosp8-Jul-08 6:27 
GeneralThank you PinmemberMember 458194114-May-08 7:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 30 Aug 2006
Article Copyright 2006 by Yes'B
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid