Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 479
  • Last Modified:

embed a datagrid inside another

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
tech1guy
Asked:
tech1guy
  • 10
  • 5
  • 2
  • +1
1 Solution
 
svyCommented:
I would use Repeater control for this.
0
 
deanvanrooyenCommented:
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
 
svyCommented:
<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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
tech1guyAuthor Commented:
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
 
deanvanrooyenCommented:
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
 
deanvanrooyenCommented:
something like


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

maybe a repeater is easier...
0
 
deanvanrooyenCommented:
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
 
nauman_ahmedCommented:
Embedded datagrids will make the UI very very confusing. You should consider filtering the data using controls like LitsBox or DropDown control.

-Nauman.
0
 
deanvanrooyenCommented:
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
 
tech1guyAuthor Commented:
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
 
tech1guyAuthor Commented:
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
 
deanvanrooyenCommented:
are these image buttons in each row?
0
 
tech1guyAuthor Commented:
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
 
deanvanrooyenCommented:
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
 
deanvanrooyenCommented:
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
 
deanvanrooyenCommented:
opps
 3 - get the html id of the calendar ... should be 3 - get the html id of the panel/div ...
0
 
tech1guyAuthor Commented:
thanks, it helps......I will try your solution.
0
 
deanvanrooyenCommented:
good luck
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!

  • 10
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now