Dynamic DragPanel Positioning

I'm back to revisiting this issue of positioning dynamically generated DragPanels. It has been suggested to use tables for the layout; however, I'm don't know how to go about doing this. Everything is dynamically generated, so the table needs to be as well.

I am using MasterPages and I'm trying to obtain a layout like below for example in my ContentPlaceHolder.

--------------------------------------------------------

Header Section

--------------------------------------------------------
Menu Section |
| Panel1 Panel2 Panel3 Panel 4
|
|
| Panel5 Panel6
|
|
| Panel7 Panel8 Panel9 Panel10
|
|
| Panel11 Panel12 Panel13
|
|

I am using the following code to generate the DragPanels. The number of DragPanels generated depends on the total count in the array.

for (int i = 0; i < portletRptArray.Length; i += 3)
{
// Setup up the Portlet Header Label Label headerLabel =new Label();
 headerLabel.ID ="headerLabel" + i.ToString();
 headerLabel.BackColor = System.Drawing.Color.Blue;
 headerLabel.ForeColor = System.Drawing.Color.White;
if (i == 0)
 {
continue;
 }
else { headerLabel.Text = portletRptArray[i + 2].ToString(); headerLabel.Width = Unit.Percentage(portletRptArray[i].Length * 2); }// Setup up the Portlet Header Panel headerPanel =new Panel();
 headerPanel.ID ="headerPanel" + i.ToString();
 headerPanel.BorderColor = System.Drawing.Color.Blue;
 headerPanel.Height = Unit.Pixel(20);
 headerPanel.Style.Add("cursor","move");
 headerPanel.Controls.Add(headerLabel);
// Setup up the Portlet Body Panel pnlBody =new Panel();
 pnlBody.ID ="pnlBody" + i.ToString();
 pnlBody.BackColor = System.Drawing.Color.LightGray;
 pnlBody.BorderColor = System.Drawing.Color.Blue;
 pnlBody.ForeColor = System.Drawing.Color.Black;
 pnlBody.BorderWidth = 1;
 pnlBody.Height = Unit.Pixel(200);
 pnlBody.Style.Add("position","absolute");
 pnlBody.Style.Add("left", Unit.Pixel(portletRptArray[i].Length * 20).ToString());
 pnlBody.Style.Add("top","200px");
 pnlBody.Controls.Add(headerPanel);
// Setup the DragPanel Extender AjaxControlToolkit.DragPanelExtender dPanel =new AjaxControlToolkit.DragPanelExtender();
 dPanel.ID ="dPanel" + i.ToString();
 dPanel.TargetControlID = pnlBody.ID;
 dPanel.DragHandleID = headerPanel.ID;
// Add the DragPanels, DragPanel Extender, and PortletPanel to the Page. portletPanel.Controls.Add(pnlBody); portletPanel.Controls.Add(dPanel);this.Form.Controls.Add(pnlBody);
this.Form.Controls.Add(dPanel);
}

Can someone please show me how I can accomplish this with the above code? This has been really frustrating me.

Can anyone help me with this? It may be a simple task, but I'm having a tough time trying to accomplish it.

No one has any ideas about how to do this?

Hi Lspence,

My understanding of your issue is that you want to make the automatically generated Panel shown as what you described above. If I have misunderstood, please feel free to let me know.

Based on my experience, I think the easiest way is add a Table control to your aspx page and make it work as a container for the generated Panel. So now you can use CSS to control its showing position.

Also you can set the Panel's showing position directly on server side. For example,

Panel1.Attributes.CssStyle.Add("position", "absolute");
Panel1.Attributes.CssStyle.Add("left", "100px");
Panel1.Attributes.CssStyle.Add("top", "100px");

Here is thesimilar thread that you can refer to.

I hope this help.

Best regards,

Jonathan

Thanks for the reply Jonathan. I remember my previous thread, I probably should have just continued this there. Anyway, after discussing this approach with a co-worker I realized that a table won't actually work well here. The reason is because the panels will be placed in each cell to achieve the layout, but they are DragPanels, so when they get moved out of the cell the table will become distorted. I was able to implement a small placing algorithm that allows for the desired placement, but it still needs some tweaking.

I do have another question though. Each DragPanel will act like a portlet, so since everything is dynamically generated how can I dynamically generate the mini-tables for each panel?

Here's an example of how one of the DragPanel's might look:

----------
| Sales Percent |
----------
| Total | 8270% |
| North | 580% |
| East | 2390%|
| South | 3200%|
| West | 2100% |
----------

Hi Lspence,

Thanks for sharing your experience. I agree with you that use TableCell to fix the Panel's position is not the best solution in your situation. You can set the Panel's absolute position on server side. Just like my second suggestion. But It's complex, isn't it?

Here is the sample to generate the Table which is use to display the information and the panel is inside the Panel.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { TableRow myTableRow1 = new TableRow(); TableCell tbCell1 = new TableCell(); tbCell1.Text = "Title1"; tbCell1.Style.Add("border-right-style", "none"); myTableRow1.Cells.Add(tbCell1); TableCell tbCell2 = new TableCell(); tbCell2.Text = "Title2"; tbCell2.Style.Add("border-left-style", "none"); myTableRow1.Cells.Add(tbCell2); this.Table1.Rows.Add(myTableRow1); //add loop here; while() state is preferred. TableRow myTableRow2 = new TableRow(); TableCell tbcell3 = new TableCell(); tbcell3.Text = "111"; TableCell tbcell4 = new TableCell(); tbcell4.Text = "222"; tbcell4.Attributes.Add("align", "center"); myTableRow2.Cells.Add(tbcell3); myTableRow2.Cells.Add(tbcell4); this.Table1.Rows.Add(myTableRow2); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:Table ID="Table1" runat="server" Border="1" BorderColor="black" CellPadding="0" CellSpacing="0" Width="50%"> </asp:Table> </form></body></html>

I hope this help.

Best regards,

Jonathan

Thank you Jonathan, this has been very helpful.