• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3471
  • Last Modified:

Gridview inside TabContainer in aspx, but being generated outside of TabContainer in resulting HTML

I seem be having trouble getting a gridview control to display its contents in a TabContainer's TabPanel.

In my ASPX code (below), the TabContainer control is inside of an UpdatePanel. This update panel is listening for a click (selectedNodeChange) event in a treeview control (within a separate UpdatePanel). When the treeview click event fires, I have code behind that handles the event and binds data to the gridview control.

Once I bind the data, the gridview control shows the results, but puts them outside of the TabPan (actually, it places it right after the HTML generated by the TabContainer control). Can anyone see what I'm doing wrong?

Thanks,

Mike
ASPX:
<asp:UpdatePanel ID="UpdatePanel_WorkHistory" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="divWorkHistoryNoContent" runat="server" style="display:block;">
            To view ...
        </div>
        <div id="divWorkHistoryContent" runat="server" style="display:none;">
            <table width="98%" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px;">
                <tr align="left">
                    <cc1:TabContainer ID="tcWorkHistory" runat="server" ScrollBars="Auto">
                        <cc1:TabPanel ID="panWorkOrders"  runat="server">
                            <HeaderTemplate>Work Orders</HeaderTemplate>
                            <ContentTemplate>
                                <asp:Panel ID="Panel1" runat="server">
                                    <asp:GridView ID="gvWorkOrderHistory" runat="server" ShowHeader = "true" AllowSorting="True" AllowPaging="False"></asp:GridView>
                                </asp:Panel>
                            </ContentTemplate>
                        </cc1:TabPanel>
                        <cc1:TabPanel ID="panInspections" runat="server">
                            <HeaderTemplate>Inspections</HeaderTemplate>
                            <ContentTemplate>
                                <asp:Panel ID="Panel2" runat="server">
                                    <asp:GridView ID="gvInspectionHistory" runat="server" ShowHeader = "true" AllowSorting="True" AllowPaging="False"></asp:GridView>
                                </asp:Panel>
                            </ContentTemplate>
                        </cc1:TabPanel>
                    </cc1:TabContainer>
                </tr>
            </table>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="treAssetManager" EventName="SelectedNodeChanged" />
    </Triggers>
</asp:UpdatePanel>

Open in new window

ScreenShot001.png
0
mclosson
Asked:
mclosson
  • 3
  • 2
1 Solution
 
CtrlAltDlCommented:
I'm not sure why it wouldn't work that way, but I would try putting an updatepanel within each tabcontainer.  That way each gridview has it's own updatepanel.
0
 
mclossonAuthor Commented:
I gave the idea a shot by adding UpdatePanels to each of the TabPanels (in their ContentTemplates); the result was still the same. I still get the GridView being generated outside of the TabContainer's generated HTML.
0
 
mclossonAuthor Commented:
By the way, just to make sure my event handlers for my various update panels were working correctly, I decided to try using a server side Label control instead of the GridView. I added the text to the Label control at the same point in my code behind that I originally bound data to my GridView. Using the Label works fine; this leads me to believe that this might be a limitation of the GridView control (or I'm just using it incorrectly). I've added my original code behind for the gridview below, just to show how I was populating it. Do I need to anything like bind it or add it to the panel in my code behind?
ASPX:
<cc1:TabPanel ID="panWorkOrders"  runat="server">
  <HeaderTemplate>Work Orders</HeaderTemplate>
  <ContentTemplate>
    <asp:Panel ID="Panel1" runat="server">
      <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </asp:Panel>
  </ContentTemplate>
</cc1:TabPanel>
 
 
C# (for the label):
Label1.Text = "Label 1 content";
 
 
C# (for the GridView):
gvWorkOrderHistory.ShowHeader = true;
gvWorkOrderHistory.AllowSorting = true;
gvWorkOrderHistory.Width = 100;
gvWorkOrderHistory.Height = 100;
gvWorkOrderHistory.DataSource = dsWorkHistory;
gvWorkOrderHistory.DataBind();

Open in new window

ScreenShot001.png
0
 
mclossonAuthor Commented:
Turns out I was able to get it working finally! In order to fix it, I had to limit myself to just placing the TabContainer control, without tabpanels, in the updatepanel. I had to then just create the tabpanel and gridview through my codebehind. I'm still not sure why the original method didn't work, but am guessing it had something to do with when the tabpanels were being rendered as compared to my gridview.
ASPX:
<asp:UpdatePanel ID="UpdatePanel_WorkHistory" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="divWorkHistoryNoContent" runat="server" style="display:block;">
            To view an asset's work history, please click on the asset name in the Asset Manager panel.
        </div>
        <div id="divWorkHistoryContent" runat="server" style="display:none;">
            <table width="98%" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px;">
                <tr align="left">
                    <td>
                        <cc1:TabContainer ID="tcWorkHistory" runat="server" ScrollBars="Auto"></cc1:TabContainer>
                    </td>
                </tr>
            </table>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="treAssetManager" EventName="SelectedNodeChanged" />
    </Triggers>
</asp:UpdatePanel>
 
 
C#:
GridView gvWorkOrderHistory = new GridView();
gvWorkOrderHistory.ShowHeader = true;
gvWorkOrderHistory.AllowSorting = true;
gvWorkOrderHistory.Width = 100;
gvWorkOrderHistory.Height = 100;
gvWorkOrderHistory.DataSource = dsWorkHistory;
gvWorkOrderHistory.DataBind();
 
AjaxControlToolkit.TabPanel tcTabPanel = new AjaxControlToolkit.TabPanel();
tcTabPanel.Controls.Add(gvWorkOrderHistory);
tcTabPanel.HeaderText = "Work Orders";
tcWorkHistory.Width = Convert.ToInt32(Convert.ToInt32(ConfigurationManager.AppSettings["PagePanelPixelWidth"]) * .98);
tcWorkHistory.Height = 250;
tcWorkHistory.ScrollBars = ScrollBars.Auto;
tcWorkHistory.Tabs.Add(tcTabPanel);
tcWorkHistory.ActiveTabIndex = 0;

Open in new window

0
 
CtrlAltDlCommented:
It almost sounds like a bug in the tabpanels.  I'm glad you figured it out.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now