Solved

Align columns in nested gridview

Posted on 2010-08-28
13
1,152 Views
Last Modified: 2012-05-10
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!
0
Comment
Question by:yanasizonenko
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
13 Comments
 
LVL 8

Expert Comment

by:Mohit Vijay
ID: 33551796
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.
0
 
LVL 8

Expert Comment

by:Mohit Vijay
ID: 33551809
Another way is to set hard coded with in pixels for both grid view control (RnD).
0
 

Author Comment

by:yanasizonenko
ID: 33553033
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>&nbsp;&nbsp;&nbsp;<%# 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();
            }
        }
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 5

Expert Comment

by:FredTang
ID: 33553328
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>
0
 

Author Comment

by:yanasizonenko
ID: 33554390
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
0
 
LVL 8

Expert Comment

by:Mohit Vijay
ID: 33555558
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.
0
 

Author Comment

by:yanasizonenko
ID: 33560582
It moved the gvEmployee grid to the right.
Attached is a screenshot.
Doc1.docx
0
 
LVL 8

Expert Comment

by:Mohit Vijay
ID: 33560836
can you please again post your code, so that I can look into what you did?
0
 

Author Comment

by:yanasizonenko
ID: 33561068
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>&nbsp;&nbsp;&nbsp;<%# 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>
0
 
LVL 8

Accepted Solution

by:
Mohit Vijay earned 500 total points
ID: 33561174
try below code...
-----------------------------

<asp:GridView ID="gvManager" runat="server" AutoGenerateColumns="False"
        OnRowDataBound="gvManager_RowDataBound">
        <Columns>                
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate><%# Eval("Name") %></ItemTemplate>
                    <ItemStyle Width="200px" 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="100px" 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="100px" HorizontalAlign="Left"/>                    
                </asp:TemplateField>
               
                <asp:TemplateField>
      <ItemTemplate>                                                    
                                <tr>
                            <td colspan="100%">
                                     <asp:GridView ID="gvEmployee"  runat="server" ShowHeader="false" AutoGenerateColumns="false">
                                        <Columns>
                                        <asp:TemplateField>
                                            <ItemTemplate>&nbsp;&nbsp;&nbsp;<%# Eval("Name") %></ItemTemplate>
                                            <ItemStyle Width="200px" HorizontalAlign="Left"/>                  
                                        </asp:TemplateField>
                                        <asp:TemplateField>
                                            <ItemTemplate><%# Eval("StartDate", "{0:d}") %></ItemTemplate>
                                            <ItemStyle Width="100px" HorizontalAlign="Left"/>                    
                                        </asp:TemplateField>
                                        <asp:TemplateField>
                                            <ItemTemplate><%# Eval("EndDate", "{0:d}")%></ItemTemplate>
                                            <ItemStyle Width="100px" HorizontalAlign="Left"/>                    
                                        </asp:TemplateField>                                        
                                        </Columns>
                                    </asp:GridView>
                                                       </td>
</tr>
                    </ItemTemplate>
                </asp:TemplateField>
               
        </Columns>
   </asp:GridView>
0
 

Author Comment

by:yanasizonenko
ID: 33561257
it still gives the same result
0
 

Author Comment

by:yanasizonenko
ID: 33568251
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.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question