embed a datagrid inside another

I would use Repeater control for this.

are you using template columns eg

     <asp:DataGrid ID="DataGrid1" Caption="datagrid" runat="server" DataSourceID="SqlDataSource1" OnItemCommand="DataGrid1_ItemCommand"  OnSelectedIndexChanged="DataGrid1_SelectedIndexChanged" >
            <Columns>
           <asp:TemplateColumn>
             <ItemTemplate>
                   <asp:DataGrid ID="DataGrid2" runat="server" BackColor=Beige>
                     <Columns>          
                         <asp:TemplateColumn>
                         <ItemTemplate>
                          <asp:Label ID="iLabel" runat="server" Text='<%#Eval("productID") %>'  />
                          </ItemTemplate>
                          </asp:TemplateColumn>
                      </Columns>
                  </asp:DataGrid>
          </ItemTemplate>
     </asp:TemplateColumn>
            </Columns>
           
        </asp:DataGrid>

you could play around with  <asp:TemplateColumn ItemStyle-Width> etc

<asp:Repeater ID="Repeater1" DataSource="SourceA">
      <HeaderTemplate>
            <TABLE>
      </HeaderTemplate>
      <ItemTemplate>
            <TR><TD>outter</TD><TD>A</TD><TD>B</TD></TR>
            <TR>
                  <TD colspan="3">
                  <asp:Repeater ID="Repeater2" DataSource='SourceB'>
                        <HeaderTemplate>
                              <TABLE width="100%">
                        </HeaderTemplate>
                        <ItemTemplate>
                              <TR><TD>inner</TD></TR>
                        </ItemTemplate>
                        <FooterTemplate>
                              </TABLE>
                        </FooterTemplate>
                  </asp:Repeater>
                  </TD>
            </TR>
      </ItemTemplate>
      <FooterTemplate>
            </TABLE>
      </FooterTemplate>
</asp:Repeater>

Hi deanvanrooyen,
Yes, I'm using template column inside datagrid. But using asp:TemplateColumn ItemStyle-Width will only serve the purpose for child grid. But I need something like: say I have a datagrid with 4 columns and in that datagrid's 2nd column I have embedded another second datagrid (child grid), now I want is that child grid appears under parent grid's column #2,3,4 instead of forcing the 3rd and 4th column to shift. Is it possible?

Thanks!

so you dont want the original grid to realy change and have the child grid do like a colspan over col 2,3,4? does this child grid occur in every row?

something like


grid1
col1    col2    col3    col4      ____
|grid1|grid1|grid1|grid1 |          |
|       |____|____|_____|
|       |  child grid           |            this is one row
|____|_______________|   ____|

maybe a repeater is easier...

in the grid I used a html table but then you are putting all the controls in one itemtemplate so it is a bit messy

       <asp:TemplateColumn>
          <ItemTemplate>
           <table>
            <tr>
                <td style="height: 45px">
                <asp:Button ID="btnEdit" Runat="server" CommandName="Edit" Text="Edit" Font-Size="12px"></asp:Button>
                </td>
                <td style="height: 45px">
                <asp:Button id="btnAdd" Runat="server" Text="Add" CommandName="Insert" Font-Size="12px"></asp:Button>
                </td>
           
            </tr>
            <tr>
                <td colspan="2" style="height: 45px">
                  <asp:Label ID="test" runat="server" BackColor="AliceBlue" Width="100" Text="colspan2" ></asp:Label>
                </td>
            </tr>
        </table>
          </ItemTemplate>
     </asp:TemplateColumn>

this does this effect

grid with one row:

| EDIT  |   ADD |
|   colspan2      |

Embedded datagrids will make the UI very very confusing. You should consider filtering the data using controls like LitsBox or DropDown control.

-Nauman.

try this using css

put the grid into a template column in the parent grid but put it within a panel control my example has a calender, and with css the calender can be positioned any where in the row.

                <asp:TemplateField>
                  <asp:Panel ID="pan" runat=server CssClass="test">
                        <asp:Calendar ID="Cal" runat="server" NextMonthText=" >" CssClass="Cal" NextPrevStyle-CssClass="NextPrev" TodayDayStyle-CssClass="TodayStyle"
                            DayStyle-CssClass="DayStyle" ShowGridLines="true" NextPrevFormat="ShortMonth" >
                            <WeekendDayStyle CssClass="WeekendStyle" />
                            <OtherMonthDayStyle CssClass="OtherMonthDayStyle" />
                            <SelectedDayStyle CssClass="SelectedDayStyle" />
                            <DayHeaderStyle CssClass="DayHeader" />
                            <TitleStyle CssClass="TitleStyle" />
                            <DayStyle CssClass="DayStyle" />
                            <NextPrevStyle CssClass="NextPrev" />
                        </asp:Calendar>
                     </asp:Panel>
                        </ItemTemplate>
                </asp:TemplateField>

add a style sheet to the project put it in the same dir as the page, in the aspx page put this at the top under the <title>
 <link type="text/css" href="StyleSheet.css" media="all" rel="Stylesheet" />

then in the stylesheet file add this
.test
{
      position:relative;
      left:200px;
}

now the div (panel) can use this css through CssClass="test"
you can play around with these settings...

if you dont need the child grid in every row eg you only want the child grid to appear when a user moves their mouse over the row :) then I can show you how to do that.

HI deanvanrooyen,
I guess that you know what I want. Regarding the grid is ok. I need to show the child grid only by clicking the the ImageButton (+/-). Is it possible?

Thanks!

I currently have two imagebuttons (imgPlus and imgMinus). I need to show the grid and make visibility of imgMinus to false when user clicks on imgPlus and vice-versa.

are these image buttons in each row?

deanvanrooyen,
Regarding the colspan it's not working..........it's still pushing the other columns. I have tried, but it's not working. Is it working at ur end.
I solved the problem of visibility of imgMinus and the grid, but when I switch the grid to invisible mode, it becomes invisible and at the same time space in there. I want to retrieve that space.......I mean I want to delete the space where panel was displayed. I can open another question for "retrival of space" if you want.

thanks

I am looking at a few options here, the colspan will not work... panel / div, maybe some javascript, i will try put some stuff on here tonight

opps
 3 - get the html id of the calendar ... should be 3 - get the html id of the panel/div ...

thanks, it helps......I will try your solution.

good luck