Problem with Dynamical Controls

Imar · March 23rd, 2010, 03:15 AM

If possible, try recreating the problem without a database. E.g. use a standard for loop instead of database records.

Does the CSS matter? If so, include it; otherwise you can leave it out. This is about functionality, right?

Try to post the absolute minimum code required to make it easy to work with the code. That probably means you should create a new site / page from scratch to avoid the clutter in your pages and master page.

Imar

Gayathri79 · March 23rd, 2010, 04:45 PM

I have removed some menus, CSS and search box etc from the Master Page. so it jus has header and login.
i have added a new Default.aspx page from this Master page.
-I also removed the database records. I created everything new.

So i am posting Masterpage.master, default.aspx, default.aspx.cs.
I tried to execute this, and i am getting the same error with Button control.

Masterpage.master
-----------------

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

</head>
<body>
<form id="form1" runat="server">
<div id="header"
style="background-color:#66CDAA;height:247px; width:899px; margin-top:0px; margin-left:200px">
<img src="ImageFls/img7.gif" />      <asp:LoginVie w ID="LoginView1" runat="server">
<AnonymousTemplate>
<span class="style11"><span class="style13">Please Sign Up to Register.</span>

</AnonymousTemplate>
<LoggedInTemplate>
<span class="style11"><span class="style13">Welcome </span><asp:LoginName
ID="LoginName1" runat="server" CssClass="style13" /></span>
<span class="style13">   </span><span class="style11"><span class="style13">[ </span><asp:LoginStatus
ID="LoginStatus1" runat="server" CssClass="style13" /><span class="style13">
 ]</span> </span>

</LoggedInTemplate>
</asp:LoginView>

<asp:Login ID="Login1" runat="server"

style="z-index: 1; left: 635px; top: -44px; position: relative; height: 153px; width: 262px">
</asp:Login>
        &n bsp;  

<div style="background-color:#C9EEE1;height:714px; width:901px; margin-top:200px;margin-left:580px;
position:absolute; left: -372px; top: 52px;" class="style1" id="maincontent">

<asp:ContentPlaceHolder id="MainContentholder" runat="server">
<br />
<br />
</asp:ContentPlaceHolder>
</div>

</form>
</body>
</html>

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

Default.aspx
------------

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContentholder" Runat="Server">

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<div>
<asp:Table ID="Table1" runat="server" Height="66px" Width="418px">
</asp:Table>

</div>

</asp:Content>

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

Default.aspx.cs
---------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Common;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Drawing;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

for (int i = 0; i <= 10; i++)
{
TableRow firstrow = new TableRow();
TableCell firstcell = new TableCell();

Button but1 = new Button();
but1.ID = "Button " + i.ToString();
but1.Text = but1.ID;
firstcell.Controls.Add(but1);
firstrow.Cells.Add(firstcell);

Panel pan10 = new Panel();
pan10.Height = Unit.Pixel(100);
pan10.Width = Unit.Pixel(100);
pan10.BackColor = Color.Chocolate;
pan10.ID = "panel" + i.ToString();
Label lab = new Label();
lab.ID = "label" + i.ToString();
lab.Text = "This Panel contains Button Client Id: " + but1.ClientID;
pan10.Controls.Add(lab);
//Form.Controls.Add(pan10);

AjaxControlToolkit.HoverMenuExtender hov = new AjaxControlToolkit.HoverMenuExtender();
hov.TargetControlID = but1.ClientID;
hov.PopupControlID = pan10.ClientID;
Form.Controls.Add(hov); /* If i comment this line, this is working without hover control */
Table1.Rows.Add(firstrow);
}
}
}

Imar · March 24th, 2010, 05:24 AM

Hi Gayathri79,

I found out what the problem is. You were close, but you need to make four changes to make this work.

First, you need to use UniqueID (used for postback scenarios) instead of ClientID (for client script):

Code:

 
hov.TargetControlID = but1.UniqueID;

Secondly, the ID of the button is not valid as it contains a space. Change this:

Code:

 
but1.ID = "Button " + i.ToString();

to this:

Code:

but1.ID = "Button" + i.ToString();

Next, you need to enable the line that adds the Panel to the Form or there won't be a panel to show by the hover extender.

Code:

 
Form.Controls.Add(pan10);

Finally, the order of your code is important. Consider your current code:

Code:

 
hov.TargetControlID = but1.ClientID;
hov.PopupControlID = pan10.ClientID;
Form.Controls.Add(hov);
Table1.Rows.Add(firstrow);

The first line assigns the ClientID (which should be UniqueID) of the button to the TargetControlID. However, at this stage, the button doesn't know it's inside a table that's inside a Master Page. So, at this stage, it simply returns Button0 for the first button. However, once all controls are added to the form (by adding firstrow to the table), the control hierarchy is known and the UniqueID of the button is changed from Button0 to ctl00$MainContentholder$Button0 which is the ID that the hover panel needs.

So, simply assigning the UniqueID of the button to the extender *after* all controls are added to the form should do the trick:

Code:

 
AjaxControlToolkit.HoverMenuExtender hov = new AjaxControlToolkit.HoverMenuExtender();
hov.PopupControlID = pan10.ClientID;
Form.Controls.Add(hov);
Table1.Rows.Add(firstrow);
hov.TargetControlID = but1.UniqueID;

This way, TargetControlID gets assigned the full unique ID of the button control.

For your reference, here's the complete working code:

Code:

 
protected void Page_Load(object sender, EventArgs e)
{
 for (int i = 0; i <= 10; i++)
 {
  TableRow firstrow = new TableRow();
  TableCell firstcell = new TableCell();
  Button but1 = new Button();
  but1.ID = "Button" + i.ToString();
  but1.Text = but1.ID;
  firstcell.Controls.Add(but1);
  firstrow.Cells.Add(firstcell);
  Panel pan10 = new Panel();
  pan10.Height = Unit.Pixel(100);
  pan10.Width = Unit.Pixel(100);
  pan10.BackColor = Color.Chocolate;
  pan10.ID = "panel" + i.ToString();
  Label lab = new Label();
  lab.ID = "label" + i.ToString();
  lab.Text = "This Panel contains Button Client Id: " + but1.ClientID;
  pan10.Controls.Add(lab);
  Form.Controls.Add(pan10);
  AjaxControlToolkit.HoverMenuExtender hov = new AjaxControlToolkit.HoverMenuExtender();
  hov.PopupControlID = pan10.ClientID;
  Form.Controls.Add(hov);
  Table1.Rows.Add(firstrow);
  hov.TargetControlID = but1.UniqueID;
 }
}

Hope this helps,

Imar

Gayathri79 · March 24th, 2010, 02:58 PM

Thank you so much for your time. It worked. But there is one small problem.

When i enable the Panel control 'pan10' , every time the page loads, the 'pan10' appears on the form for a second and disappears again. i tried to make it hidden using '.popupMenu' inthe Cssclass:

.popupMenu
{
height:400px;
width:400px;
visibility: hidden;
}
And added in the load event as:

pan1.CssClass = "popupMenu";

Now Panel is not appearing on the Form, but appears like a thin horizontal line when i hover on the burron control.

Imar · March 24th, 2010, 07:01 PM

Can't you put all the panels inside a div that is initially hidden using CSS and then show it using some onload code (using jQuery for example)?

BTW: it's better to post a new message instead of editing an existing one. I follow these forums over e-mail and you initially said: "it works, thanks", so I almost missed this update...

Cheers,

Imar

Gayathri79 · March 24th, 2010, 07:26 PM

sorry abt that.

Imar · March 25th, 2010, 03:20 AM

No need to be sorry; just a tip to help your posts get more attention.

Cheers,

Imar