asked on

Align columns in nested gridview

Hello.

I have a gridView within a gridView. Both contain the same information. It's a project and subproject, so it has project name, start date, end date and so on ...

I need the columns in both gridViews to be exactly aligned. How to achive this? If it's not possible with gridView, another control will do.

Thank you very much!

Mohit Vijay

If you heard about ItemTemplate in GridView column, then use that (I hope you are using it to place another grid view). Use table structure in parent grid view and using that you can achieve your target.

Mohit Vijay

Another way is to set hard coded with in pixels for both grid view control (RnD).

yanasizonenko

ASKER

I tried setting ItemTemplate width with <ItemStyle Width="100" /> , but it doesn't seem to render it that way. I also tried to hard code grid width, but still nothing.

How would I use table structure? I have a 4 level nested gridView, and levels might add in the future. Can you provide some code sample please?

I've attached sample dummy grid.

<asp:GridView ID="gvManager" runat="server" AutoGenerateColumns="False"
OnRowDataBound="gvManager_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate><%# Eval("Name") %></ItemTemplate>
<ItemStyle Width="200" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Start Date">
<ItemTemplate>
<asp:Label ID="lblStartDate1" runat="server" Text='<%# Eval("StartDate", "{0:d}")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100" />
</asp:TemplateField>
<asp:TemplateField HeaderText="End Date">
<ItemTemplate>
<asp:Label ID="lblEndDate1" runat="server" Text='<%# Eval("EndDate", "{0:d}")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100" />
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div>
<asp:GridView ID="gvEmployee" runat="server" ShowHeader="false" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>   <%# Eval("Name") %></ItemTemplate>
<ItemStyle Width="200" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate><%# Eval("StartDate", "{0:d}") %></ItemTemplate>
<ItemStyle Width="100" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate><%# Eval("EndDate", "{0:d}")%></ItemTemplate>
<ItemStyle Width="100" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>

------------

Code behind

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable myDataTable = new DataTable();
DataColumn myDataColumn;

myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.String");
myDataColumn.ColumnName = "Name";
myDataTable.Columns.Add(myDataColumn);

myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.DateTime");
myDataColumn.ColumnName = "StartDate";
myDataTable.Columns.Add(myDataColumn);

myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.DateTime");
myDataColumn.ColumnName = "EndDate";
myDataTable.Columns.Add(myDataColumn);

DataRow dr = myDataTable.NewRow();
dr["Name"] = "Philip Daniel Fernando";
dr["StartDate"] = "1/1/2009";
dr["EndDate"] = "1/1/2010";

myDataTable.Rows.Add(dr);

dr = myDataTable.NewRow();
dr["Name"] = "Alex";
dr["StartDate"] = "11/11/2009";
dr["EndDate"] = "11/11/2010";

myDataTable.Rows.Add(dr);

gvManager.DataSource = myDataTable.DefaultView;
gvManager.DataBind();
}
}

protected void gvManager_RowDataBound(object sender, GridViewRowEventArgs e)
{

if (e.Row.RowType == DataControlRowType.DataRow)
{
GridViewRow row = e.Row;

// Make sure we aren't in header/footer rows
if (row.DataItem == null)
{
return;
}

//Find Child GridView control
GridView gv = new GridView();
gv = (GridView)row.FindControl("gvEmployee");

DataTable myDataTable = new DataTable();
DataColumn myDataColumn;

myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.String");
myDataColumn.ColumnName = "Name";
myDataTable.Columns.Add(myDataColumn);

myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.DateTime");
myDataColumn.ColumnName = "StartDate";
myDataTable.Columns.Add(myDataColumn);

myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.DateTime");
myDataColumn.ColumnName = "EndDate";
myDataTable.Columns.Add(myDataColumn);

if (((DataBoundLiteralControl)e.Row.Cells[0].Controls[0]).Text != "Alex")
{
DataRow dr = myDataTable.NewRow();

dr = myDataTable.NewRow();
dr["Name"] = "Lee Brooks";
dr["StartDate"] = "2/2/2009";
dr["EndDate"] = "3/2/2010";

myDataTable.Rows.Add(dr);

dr = myDataTable.NewRow();
dr["Name"] = "D.G";
dr["StartDate"] = "5/3/2009";
dr["EndDate"] = "6/3/2010";

myDataTable.Rows.Add(dr);
}

gv.DataSource = myDataTable;
gv.DataBind();
}
}

FredTang

Please try the following code,and good lucky to you.

<asp:TemplateField HeaderText="Start Date">
<ItemTemplate>
<asp:Label ID="lblStartDate1" runat="server" Text='<%# Eval("StartDate", "{0:d}")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100" style="text-align:center"/> //change here,and "style" property
</asp:TemplateField>

yanasizonenko

ASKER

that didn't help :(
I attached a word document with a print screen of the grid. as you can see the columns are everywhere.
Doc1.doc

Mohit Vijay

Remove Tr and td from top of gvEmployee and provide all width and pixels and give it a try., align all columns to the left.

yanasizonenko

ASKER

It moved the gvEmployee grid to the right.
Attached is a screenshot.
Doc1.docx

Mohit Vijay

can you please again post your code, so that I can look into what you did?

yanasizonenko

ASKER

Here it is:

<asp:GridView ID="gvManager" runat="server" AutoGenerateColumns="False"
OnRowDataBound="gvManager_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate><%# Eval("Name") %></ItemTemplate>
<ItemStyle Width="200" HorizontalAlign="Left"/>
</asp:TemplateField>
<asp:TemplateField HeaderText="Start Date">
<ItemTemplate>
<asp:Label ID="lblStartDate1" runat="server" Text='<%# Eval("StartDate", "{0:d}")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100" HorizontalAlign="Left"/>
</asp:TemplateField>
<asp:TemplateField HeaderText="End Date">
<ItemTemplate>
<asp:Label ID="lblEndDate1" runat="server" Text='<%# Eval("EndDate", "{0:d}")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100" HorizontalAlign="Left"/>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<div >
<asp:GridView ID="gvEmployee" runat="server" ShowHeader="false" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>   <%# Eval("Name") %></ItemTemplate>
<ItemStyle Width="200" HorizontalAlign="Left"/>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate><%# Eval("StartDate", "{0:d}") %></ItemTemplate>
<ItemStyle Width="100" HorizontalAlign="Left"/>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate><%# Eval("EndDate", "{0:d}")%></ItemTemplate>
<ItemStyle Width="100" HorizontalAlign="Left"/>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>

ASKER CERTIFIED SOLUTION

Mohit Vijay

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

yanasizonenko

ASKER

it still gives the same result

yanasizonenko

ASKER

Ok. I've changed my strategy.
I have now a recursive code which makes the correct order of parents and children, and puts everything into a single gridView.