[Last Call] Learn how to a build a cloud-first strategyRegister Now

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

Resizing asp:panel on the fly

Hi All,

I'm busy with a web component. This component will consist of a aps:panel and a table which gets generated from some DB data ...

I'm using the panel's OVERFLOW function to resize to either full or partial view ...

I have a problem now. The panel is high enough to display about 10 DBase rows at a time without scrolling ...
obviously if I change the CSS then this number might change.

The problem is that sometimes I will only have 1 or 2 rows in the table and displaying the table with space for ten rows is a waste ... I would therefore be able to change the height of the panel depending on how many rows I have displayed and when i reach 10 rows then it will automatically scroll ...

I need to do this on the fly as if someone changes the CSS I will not be able to hardcode the size in pixels of each row displayed ...

Any help appreciated
Txs
Peter
0
Pete2003
Asked:
Pete2003
  • 6
  • 4
1 Solution
 
PraesidiumCommented:
Define the contents of the label in code...  this.LabelName.Text = myDynamicText;  Or alternatively, use a repeater, and bind your DB results to the repeater, this way your height resizes dynamically based on the amount of data.  
0
 
Pete2003Author Commented:
ok I think I kind of understand it :)

Could you possible throw in some pseudo-code here ...

Txs
0
Independent Software Vendors: 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!

 
Pete2003Author Commented:
Ok .. I see the repeater example but I'm not usre if I understand how it's going to let me grow or shrik the panel, as this still does not give me an indication of the size of the rows
0
 
Pete2003Author Commented:
Let me explain in a little more detail :

I have a panel on an aspx page:

<asp:Panel id="Panel1" style="Z-INDEX: 101; LEFT: 0px; POSITION: absolute; TOP: 0px"
      runat="server" Width="760px" Height="195px"></asp:Panel>

As you can see it has a set height:

I now add an arbitrary number of tables to the panel


code:

Panel1.Controls.Clear();

string sHTML = "<table>";
for(n=0;n<10;n++)
{
  sHTML = "<TR><TD>HELLO</TD></TR>";
}
sHTML += "</table>";

Panel1.Controls.Add( new LiteralControl(sHTML));


Now depending on 'n' there will be more or less rows in the table .. I'd like to adjust the height of the panel accordingly
0
 
PraesidiumCommented:
Remove the static height tag, and in your style tag use height:auto;  That should solve your issue.  
0
 
Pete2003Author Commented:
hmm .. that sounds like a plan .. will try it 1st thing tomorrow ...
0
 
Pete2003Author Commented:
It doesn't work ... it puts all the panels on top of each other ... I also already have overflow:auto set
0
 
PraesidiumCommented:
Can you post your entire code, including your data binding?  
0
 
Pete2003Author Commented:
--- The Control:
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="formDataDisplay.ascx.cs" Inherits="proggie.formDataDisplay" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<DIV style="WIDTH: 760px;POSITION: relative;HEIGHT: 220px" ms_positioning="GridLayout">
      <asp:Panel id="tablePanel" style="Z-INDEX: 101; LEFT: 0px; OVERFLOW: auto; POSITION: absolute; TOP: 0px;HEIGHT:195;WIDTH:760px"
            runat="server"></asp:Panel>
      <asp:Button id="btnFirst" style="Z-INDEX: 102; LEFT: 0px; POSITION: absolute; TOP: 196px" runat="server"
            Width="25px" Height="24px" Text="<<" Visible="False"></asp:Button>
      <asp:Button id="btnPrev" style="Z-INDEX: 103; LEFT: 32px; POSITION: absolute; TOP: 196px" runat="server"
            Width="25px" Height="24px" Text="<" Visible="False"></asp:Button>
      <asp:Button id="btnNext" style="Z-INDEX: 104; LEFT: 76px; POSITION: absolute; TOP: 196px" runat="server"
            Width="25px" Height="24px" Text=">" Visible="False"></asp:Button>
      <asp:Button id="btnLast" style="Z-INDEX: 105; LEFT: 108px; POSITION: absolute; TOP: 196px" runat="server"
            Width="25px" Height="24px" Text=">>" Visible="False"></asp:Button>
      <asp:Button id="btnToggleView" style="Z-INDEX: 106; LEFT: 712px; POSITION: absolute; TOP: 196px"
            runat="server" Width="47px" Height="24px" Text="Form" Visible="False"></asp:Button>
</DIV>

--- The component data population:
sHTML.Append("<table class=\"color-border\"  border=\"0\" cellpadding=\"2\" cellspacing=\"1\" width=\"100%\">");
                  
string sValue = "";
int nIdx = 0;
                  
for(nIdx = 0; nIdx < 5; nIdx++)  ***** See Note
{
sHTML.Append("<tr class=\"color-row\">");
sHTML.Append("<td class=\"color-header\" nowrap width=\"200\">Col Desc</td>");
sHTML.Append("<td class=\"label\" nowrap>Value:"+nIdx+"</td>");
sHTML.Append("</tr>");
}
                  
sHTML.Append("</table>");



The Page:

Control c1 = LoadControl("formCtrl.ascx");
Panel1.Controls.Add(c1);

((formDataDisplay)c1).doStuff(......);

for(n = 0; nTableIdx < 3; n ++)
{
Control c2 = LoadControl("formCtrl.ascx");
Panel1.Controls.Add(c2);

((formDataDisplay)cSTable).doStuff(.....);
}

***** Note: The value 5 in this case could change with each component being loaded ... so therefore each componentl colud have more or less then 5 rows .. I now want to resize the panel/div to the number of rows ...
0
 
PraesidiumCommented:
Let me show you an easier way to handle this.  First, get your data, and databind it of course...  

Something like:

private void Indicators_ItemDataBound(object sender, RepeaterItemEventArgs e) {
                                    
      HyperLink navTo = (HyperLink)e.Item.FindControl("NavTo");
      Literal title = (Literal)e.Item.FindControl("Title");
      Literal descfinal = (Literal)e.Item.FindControl("Description");
                        
      title.Text = item.SelectSingleNode("title", this.nsmanager).InnerText;
      description = item.SelectSingleNode("description", this.nsmanager).InnerText;
      link = item.SelectSingleNode("link", this.nsmanager).InnerText;
            

      string pardesc = description.Substring(0, maxChars);

      descfinal.Text = pardesc;
      navTo.NavigateUrl = link;
      }
}

This example is binding an XML document I retrieved to a repeater named Indicators.  In the page, the repeater should look like this:

<asp:Repeater Runat="server" ID="Indicators">
      <ItemTemplate>
                                    
<asp:HyperLink Runat="server" Target="_blank" ID="NavTo">
<asp:Literal Runat="server" id="Title"/>
</asp:HyperLink><br/><br/>
<asp:Literal Runat="server" id="Description"/>
                                    
      </ItemTemplate>                              
</asp:Repeater>

Even though each item in the repeater does not have a unique ID, the framework will allow it in this circumstance.  You can do a table by specifying
<table>
<asp:repeater>
<itemtemplate>
<tr>
<td>Data Literal</td>
</tr>
</itemtemplate>
</asp:repeater>
</table>

And you can even get more creative, creating 2 columns using the alternatingitemtemplate etc.  This way the data that you pull will be a dynamic size based on the amount of data output, instead of writing a table statically.

I think you will have alot more success using this method.  Additionally, if you use an asp:datagrid, it will do it's own paging, and that eliminates another step, though it's a very expensive operation.    
0

Featured Post

Technology Partners: 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!

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now