Solved

Resizing asp:panel on the fly

Posted on 2004-10-20
11
2,373 Views
Last Modified: 2008-02-01
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
Comment
Question by:Pete2003
  • 6
  • 4
11 Comments
 
LVL 6

Expert Comment

by:Praesidium
ID: 12363597
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
 

Author Comment

by:Pete2003
ID: 12363741
ok I think I kind of understand it :)

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

Txs
0
 
LVL 6

Expert Comment

by:viola123
ID: 12365943
0
 

Author Comment

by:Pete2003
ID: 12367279
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
 

Author Comment

by:Pete2003
ID: 12367309
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 6

Expert Comment

by:Praesidium
ID: 12370797
Remove the static height tag, and in your style tag use height:auto;  That should solve your issue.  
0
 

Author Comment

by:Pete2003
ID: 12371588
hmm .. that sounds like a plan .. will try it 1st thing tomorrow ...
0
 

Author Comment

by:Pete2003
ID: 12380121
It doesn't work ... it puts all the panels on top of each other ... I also already have overflow:auto set
0
 
LVL 6

Expert Comment

by:Praesidium
ID: 12381436
Can you post your entire code, including your data binding?  
0
 

Author Comment

by:Pete2003
ID: 12381697
--- 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
 
LVL 6

Accepted Solution

by:
Praesidium earned 400 total points
ID: 12383167
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Introduction This article series is supposed to shed some light on the use of IDisposable and objects that inherit from it. In essence, a more apt title for this article would be: using (IDisposable) {}. I’m just not sure how many people would ge…
Introduction Although it is an old technology, serial ports are still being used by many hardware manufacturers. If you develop applications in C#, Microsoft .NET framework has SerialPort class to communicate with the serial ports.  I needed to…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

760 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

22 Experts available now in Live!

Get 1:1 Help Now