Solved

embed a datagrid inside another

Posted on 2006-07-13
18
471 Views
Last Modified: 2010-05-18
Experts,
I am trying to embed a datagrid within a datagrid.  This second datagrid is spanning from left to right, and pushing the other columns in the top datagrid well to the right.  I wish this embeded datagrid to run along the bottom of the row, with the rest of the cells above it.
I need to use 2 data-grids only, I've seen some examples where this can be achieved by using only one datagrid with dataset. But my problem is that I have 2 different arraylists which are binded to two different datagrids.
The only problem I'm facing is that embedded datagrid is pushing other columns. Is there any way to sort this out?

Thanks
0
Comment
Question by:tech1guy
  • 10
  • 5
  • 2
  • +1
18 Comments
 
LVL 4

Expert Comment

by:svy
ID: 17101078
I would use Repeater control for this.
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17101820
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
0
 
LVL 4

Expert Comment

by:svy
ID: 17101942
<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>
0
 

Author Comment

by:tech1guy
ID: 17103443
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!
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17103814
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?
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17103912
something like


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

maybe a repeater is easier...
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17104110
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      |
0
 
LVL 25

Expert Comment

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

-Nauman.
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17104459
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.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:tech1guy
ID: 17109057
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!
0
 

Author Comment

by:tech1guy
ID: 17109074
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.
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17112483
are these image buttons in each row?
0
 

Author Comment

by:tech1guy
ID: 17112530
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
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17112558
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
0
 
LVL 12

Accepted Solution

by:
deanvanrooyen earned 500 total points
ID: 17113076
you can try this, actually uses a javascript written by another ee just modified it,

question though  -  does clicking the image buttons do anything more than just make the grid invisible or visible, if they do nothing more then than then just make them images and you can use the mouseover javascript to make the div visible or not  so there is no post back or clicking :
there is only 1 tricky part but i can explain it.

put this anywhere in the <head> tag in the aspx page

 <script type="text/javascript">
function ToggleCal(c){//Toggle control by row event

if(document.getElementById('' + c + '').style.display=='none')
{
document.getElementById('' + c + '').style.display='block';
}
else
document.getElementById('' + c + '').style.display='none';
}

function ToggleOff(c){//Toggle control off
document.getElementById('' + c + '').style.display='none';
}
function ToggleOn(c){//Toggle control on
document.getElementById('' + c + '').style.display='block';
}
</script>


make the child grid in a panel like (i use a calendar) - add cssclass if you want
                  <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>

I added a style sheet to the project to control where on the page the calendar shows :
in the style sheet

.test
{
      position:relative;  <--- this keeps the positioning on the same row
      left:5px;   <---- moves it more to the right
      top:5px;   <----- moves it down
}
link to the style sheet called StyleSheet.css in the <head> tag
<link type="text/css" href="StyleSheet.css" media="all" rel="Stylesheet" />

to link the javascript to the rows in the gridview use the on databound handler of the rows

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            this.GridView1.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);  
            ....
        }
    }


    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //1
            Panel cl = (Panel)e.Row.Controls[1].Controls[5];
            cl.Style["display"] = "none";
            //2
            Button plus = (Button)e.Row.Controls[3].Controls[1];
            Button minus = (Button)e.Row.Controls[3].Controls[3];
            //3
            string ctrlid = e.Row.Controls[1].Controls[5].ClientID.ToString();
            //4
            plus.Attributes.Add("onmouseover", "ToggleOn('" + ctrlid + "');");
            minus.Attributes.Add("onmouseover", "ToggleOff('" + ctrlid + "');");
            //5
            //e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='blue'; ToggleCal('" + ctrlid + "');");
            //e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'; ToggleCal('" + ctrlid + "');");
           
        }

    }

an explanation:
1 - the panel houses my calendar, we need to get a reference to it to set it to display:none when it is rendered as a div.
2 - get a reference to 2 buttons - this was just to test but but plain image controls are better so that there is no post backs
3 - get the html id of the calendar - when asp.net renders the panel to a div its name is something like this : ctrlid = "GridView1_ctl02_pan" each row in the grid it is different eg next row is "GridView1_ctl02_pan", we need this name to pass onto the javascript to toggle the view on / off
4 - attaches the javascript to the buttons/images in each row with the correct panel id
5 - this is commented out - but this is what I use what it does is attached the javascript to each row of the grid so as the user moves there mouse over the row then the div appears with the calendar, you can try this if you want... just comment out step 4, its works very well.

the trick part was getting the correct index of the control to cast eg Panel cl = (Panel)e.Row.Controls[1].Controls[5]; - 1 and 5
the best way to do this is to add tracing to page to get the right index eg
<%@ Page Language="C#" trace="true" ....
this puts trace info at the bottom on the page this shows my gridview :
this is from line 6 of the grid
                 control                                index
                 GridView1$ctl06                               System.Web.UI.WebControls.GridViewRow 10031 272 0
                    GridView1$ctl06$ctl03          [0]     System.Web.UI.WebControls.DataControlFieldCell 78 0 0
                        GridView1$ctl06$ctl00               System.Web.UI.WebControls.DataControlLinkButton 66 0 0
                    GridView1$ctl06$ctl04          [1][0] System.Web.UI.WebControls.DataControlFieldCell 8894 0 0
                        GridView1$ctl06$ctl05               System.Web.UI.LiteralControl 49 0 0
                        GridView1$ctl06$itemButton      System.Web.UI.WebControls.Button 113 68 0
                        GridView1$ctl06$ctl06               System.Web.UI.LiteralControl 28 0 0
                        GridView1$ctl06$itemImage       System.Web.UI.WebControls.Image 0 0 0
                        GridView1$ctl06$ctl07                System.Web.UI.LiteralControl 48 0 0
                        GridView1$ctl06$pan       [1][5]  System.Web.UI.WebControls.Panel 8621 40 0       <------panel
                            GridView1$ctl06$ctl08            System.Web.UI.LiteralControl 30 0 0
                            GridView1$ctl06$Cal              System.Web.UI.WebControls.Calendar 8490 0 0
                            GridView1$ctl06$ctl09            System.Web.UI.LiteralControl 23 0 0
                        GridView1$ctl06$ctl10                System.Web.UI.LiteralControl 26 0 0
                    GridView1$ctl06$ctl11         [2][0]  System.Web.UI.WebControls.DataControlFieldCell 209 0 0
                        GridView1$ctl06$ctl12               System.Web.UI.LiteralControl 28 0 0
                        GridView1$ctl06$chkbox            System.Web.UI.WebControls.CheckBox 149 28 0
                        GridView1$ctl06$ctl13               System.Web.UI.LiteralControl 23 0 0
                    GridView1$ctl06$ctl14        [3][0]   System.Web.UI.WebControls.DataControlFieldCell 282 0 0
                        GridView1$ctl06$ctl15               System.Web.UI.LiteralControl 31 0 0
                        GridView1$ctl06$btplus             System.Web.UI.WebControls.Button 94 0 0                     <--------button
                        GridView1$ctl06$ctl16               System.Web.UI.LiteralControl 28 0 0
                        GridView1$ctl06$btminus           System.Web.UI.WebControls.Button 97 0 0                    <--------button
                        GridView1$ctl06$ctl17               System.Web.UI.LiteralControl 23 0 0
                    GridView1$ctl06$ctl18                   System.Web.UI.WebControls.DataControlFieldCell 73 0 0
                        GridView1$ctl06$ctl01               System.Web.UI.WebControls.DataControlLinkButton 64 0 0
                    GridView1$ctl06$ctl19                   System.Web.UI.WebControls.DataControlFieldCell 182 0 0
                        GridView1$ctl06$ctl02               System.Web.UI.WebControls.CheckBox 173 28 0
                    GridView1$ctl06$ctl20                   System.Web.UI.WebControls.DataControlFieldCell 10 20 0
                    GridView1$ctl06$ctl21                   System.Web.UI.WebControls.DataControlFieldCell 31 48 0
                    GridView1$ctl06$ctl22                   System.Web.UI.WebControls.DataControlFieldCell 10 20 0
                    GridView1$ctl06$ctl23                   System.Web.UI.WebControls.DataControlFieldCell 10 20 0
                    GridView1$ctl06$ctl24                    System.Web.UI.WebControls.DataControlFieldCell 17 32 0
                    GridView1$ctl06$ctl25                     System.Web.UI.WebControls.DataControlFieldCell 16 28 0
                    GridView1$ctl06$ctl26

hopefully this will help.....
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17113086
opps
 3 - get the html id of the calendar ... should be 3 - get the html id of the panel/div ...
0
 

Author Comment

by:tech1guy
ID: 17114594
thanks, it helps......I will try your solution.
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17116052
good luck
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
This video discusses moving either the default database or any database to a new volume.
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

706 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now