Displaying drill down rows in datagrid

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

<o:p> 

Introduction

<o:p> 

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.

<o:p> 

How to use

<o:p> 

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

<o:p> 

<asp:datagrid ...><o:p>

...<o:p>

<Columns><o:p>

<o:p> 

<asp:TemplateColumn Visible="False"><o:p>

         <HeaderStyle BorderWidth="0px"><o:p>

         </HeaderStyle><o:p>

         <ItemStyle BorderWidth="0px"><o:p>

         </ItemStyle><o:p>

         <ItemTemplate><o:p>

         <ItemStyle Width="1" /><o:p>

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

                 </td><o:p>

                 </tr><o:p>

                 <tr><o:p>

                 <td class="label" colspan="11" align="left" ><o:p>

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

                 </asp:Label<o:p>

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

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

                      Height="20px">               <o:p>

                 </asp:TextBox><o:p>

                 <asp:RequiredFieldValidator id="rfvIntime"

                      runat="server" ControlToValidate="inTimeTextBox"

                      ErrorMessage="Please enter Sample in time">*

                 </asp:RequiredFieldValidator><o:p>

                 <asp:validationsummary id="validationSummary" Runat="server"          <o:p>

                          ShowSummary="False" ShowMessageBox="True"><o:p>

                 </asp:validationsummary><o:p>

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

                          :"><o:p>

                 </asp:Label<o:p>

                 <asp:TextBox id="outTimeTextBox" cssclass="tbflat"           <o:p>

                          Width="130px" runat="server" ReadOnly="False"                <o:p>

                          Height="20px"><o:p>

                 </asp:TextBox>                                                        <o:p>

                 <asp:LinkButton ID="SubmitLink" Runat="server"                        <o:p>

                          cssclass="breadcrumblink"                                    <o:p>

                          CommandName="Submit">Submit<o:p>

                 </asp:LinkButton><o:p>

                 <asp:LinkButton ID="CancelLabel" Runat="server"                       <o:p>

                          CssClass="breadcrumblink" CommandName="Cancel"               <o:p>

                          CausesValidation="false">Cancel<o:p>

                 </asp:LinkButton><o:p>

                 </td><o:p>

                 </td><o:p>

                 </tr><o:p>

                 </asp:PlaceHolder>                                  <o:p>

                 </ItemTemplate><o:p>

</asp:TemplateColumn><o:p>

    ...<o:p>

    </Columns><o:p>

...<o:p>

</asp:datagrid><o:p>

<o:p> 

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.<o:p>

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.

<o:p> 

<o:p> 

<asp:datagrid ...><o:p>

...<o:p>

    <Columns><o:p>

     <asp:TemplateColumn><o:p>

         <HeaderTemplate><o:p>

         </HeaderTemplate><o:p>

                 <ItemTemplate><o:p>

                 <asp:LinkButton ID ="btnExpand" CommandName="Expand" Runat            <o:p>

                          ="server" >DrillDown<o:p>

                 </asp:LinkButton><o:p>

                 </ItemTemplate><o:p>

         </asp:TemplateColumn><o:p>

    ...<o:p>

    </Columns><o:p>

...<o:p>

</asp:datagrid><o:p>

 

Use following code to link OnItemCommand event to call DrilldownGrid_OnItemCommand"

<o:p> 

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

    ...<o:p>

         <Columns><o:p>

    ...<o:p>

         </Columns><o:p>

...<o:p>

</asp:datagrid><o:p>

 

Write the following code in DrilldownGrid_OnItemCommand method

<o:p> 

public  void DrilldownGrid_OnItemCommand(object source                                 <o:p>

                 ,System.Web.UI.WebControls.DataGridCommandEventArgs e) <o:p>

                 {

                 //Get expand Content <o:p>

                 PlaceHolder  expandedContent   = (PlaceHolder)e.Item.                 <o:p>

                 FindControl("ExpandedContent");<o:p>

                 switch(e.CommandName) <o:p>

                          {<o:p>

                 //If command name is "Expand" then modify the visibility of <o:p>

                 expand content<o:p>

                 case "Expand":<o:p>

<o:p> 

                          if(gridExpandState==false)<o:p>

                          {<o:p>

                          gridExpandState=!gridExpandState;<o:p>

                          expandedContent.Visible = ! expandedContent.Visible;<o:p>

                          DrilDownGrid.Columns [DrilDownGrid.Columns.Count-            <o:p>

                          1].Visible =!DrilDownGrid.Columns                   <o:p>

                          [DrilDownGrid.Columns.Count-1].Visible ;<o:p>

                          }<o:p>

                          break;<o:p>

                          //Show hide expand content<o:p>

                          case "Cancel":<o:p>

                          {<o:p>

                          gridExpandState=!gridExpandState;<o:p>

                          expandedContent.Visible = ! expandedContent.Visible;<o:p>

                          DrilDownGrid.Columns [DrilDownGrid.Columns.Count-            <o:p>

                          1].Visible =!DrilDownGrid.Columns                   <o:p>

                          DrilDownGrid.Columns.Count-1].Visible ;<o:p>

                          }<o:p>

                          break;<o:p>

                 }<o:p>

         }<o:p>

 

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

<o:p> 

protected bool gridExpandState <o:p>

{<o:p>

         get <o:p>

         {<o:p>

         object gridExpandStateObject = ViewState["gridExpandState"];<o:p>

         return (gridExpandStateObject == null) ? false :    (bool)gridExpandStateObject;<o:p>

         }<o:p>

         set <o:p>

         {<o:p>

         ViewState["gridExpandState"] = value;<o:p>

         }<o:p>

}<o:p>

 

Your DataGrid is now ready.

<o:p> 

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

<o:p> 

Acknowledgements

<o:p> 

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

<o:p> 

Usage and Copyrights

<o:p> 

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.<o:p>

<o:p>