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.
